Дайте границу объединенному набору полей

#css #reactjs #fieldset

Вопрос:

Я пытался создать набор полей с помощью приложения react, но это казалось трудным, поэтому мне удалось сделать его похожим на css, и теперь мне очень любопытно, как точно так же ограничить поле comlpete изображение 1

 lt;div class="fieldset"gt;  lt;div class="legend"gt;Textlt;/divgt;  Text2  lt;/divgt;  

Индивидуальные Стили:

 .fieldset{  width: 200px;  height: 300px;  border: 1px solid black;  padding: 30px;  margin: 30px;  position: relative;  }  .legend{  font-size: 45px;  position: absolute;  top: -8%;  left: 50%;  transform: translate(-50%);  background: #fff;  }  

Комментарии:

1. Пожалуйста, покажите нам свой код, так как мы можем только догадываться, как «полная коробка» состоит из элементов(ов);

2. @AHaworth здесь!

Ответ №1:

таким образом, вы сможете приблизиться к своей цели. Надеюсь, это сработает для вас.

 .fieldset{  border: 1px solid black;  padding: 30px;  margin: 100px 30px 30px;  position: relative;  font-size: 45px;  width: 200px;  border-radius: 10px;   }  .legend{  position: absolute;  width: fit-content;  top: -74px;  left: 0;  right: 0;  margin: 0 auto;  padding: 10px;  border: 1px solid #000;  border-bottom: 1px solid #fff;  border-radius: 10px 10px 0 0;  } 
 lt;div class="fieldset"gt;  lt;div class="legend"gt;Titlelt;/divgt;  Content lt;/divgt;