Как сделать текстовые поля подходящим родительским DIV с метками?

Question

Это код, который я использую для создания div, который составляет 100% ширины области содержимого, и имеет тонкую серая рамка вокруг него. Внутри есть куча входов. Если вы заметили, каждый вход имеет заданный размер. Он отлично работает, если ваш экран имеет тот же размер, что и мой, и ваш браузер даже не сведен к минимуму. Когда произойдет одно из этих событий, входы будут отображаться ниже ярлыков, и форма становится запутанной.

Я не могу понять, как сделать ширину этих текстовых полей динамической, чтобы текстовое поле соответствовало ширине, оставшейся в родительском DIV после метки.

<div class="text_container_border"> 
     Foobar Label: <input name="foobar_1" size="60" type="text" class="hidden_textfield" value=""/> 
             <br /> 
     Foobar Label 2: <input name="foobar_2" size="60" type="text" class="hidden_textfield" value=""/> 
     <br /> 
     Foobar Label 3: <input name="foobar_3" size="60" type="text" class="hidden_textfield" value=""/> 
     <br /> 
     Small Foobar: <input name="small_foobar" size="20" type="text" class="hidden_textfield" value=""/> 
     Smaller Foobar: <input maxlength="14" name="smaller_foobar" size="14" type="text" class="hidden_textfield" value=""/> 
     Smallest Foobar: <input maxlength="10" name="smallest_foobar" size="35" type="text" class="hidden_textfield" value=""/> 
</div> 

Answer 1

Взгляните на этот question on So .Это отображает метку вместе с текстовой области для DIV даже после изменения размера.

Answer 2

Без CSS для класса .text_container_border Я не уверен, насколько велика граница, но размер границы должен учитываться при вычислении ширины; если ширина 100%, то есть 100% + размер границы (слева + справа), чтобы он мог переполняться; то есть, если у вас есть n граница вокруг, и она добавляет 1px как к левой, так и к правой сторонам, то есть 2px дополнительной ширины. Свойство ширины CSS поможет здесь, в отличие от свойства size.

Кроме того, для допустимого HTML метка должна использоваться с входами. Дайте метку а, для = "" и сопоставить его с идентификатором на входе:

<label for="1">Foobar Label: </label> 
<input id="1" name="foobar_1" size="60" type="text" class="hidden_textfield" value=""/> 

Вот Fiddle: https://fiddle.jshell.net/4b4u2anb/

Для предотвращения разрыва этикеток добавьте CSS:

label { 
    white-space: nowrap; 
} 

Fiddle

Answer 3

Настоящий рабочий пример точного требования. Вы можете свести к минимуму окна, текстовое поле не будет отображаться во второй строке.

Я изменил ваш код, и я добавил код css. Он работает нормально.

.css1 { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
span { 
 
    display: table-cell; 
 
    width: 100%; 
 
    padding: 0px 10px; 
 
} 
 

 
.text { 
 
    width: 100%; 
 
}

<div class="text_container_border"> 
 
\t \t <div class="css1"> 
 
\t \t \t <font style=" white-space: nowrap;">Foobar Label: </font> 
 
\t \t \t <span> <input class=".text" name="foobar_1" size="60" type="text" class="hidden_textfield" value=""/> </span> 
 
     </div> 
 
\t \t </br> 
 
\t \t 
 
\t \t <div class="css1"> 
 
\t \t \t <font style=" white-space: nowrap;">Foobar Label 2: </font> 
 
\t \t \t <span> <input class=".text" name="foobar_2" size="60" type="text" class="hidden_textfield" value=""/> </span> 
 
     </div> 
 
     <br> 
 
\t \t 
 
\t \t 
 
\t \t <div class="css1"> 
 
\t \t \t <font style=" white-space: nowrap;">Foobar Label 3: </font> 
 
\t \t \t <span> <input class=".text" name="foobar_3" size="60" type="text" class="hidden_textfield" value=""/> </span> 
 
     </div> 
 
\t \t <br> 
 
\t \t 
 
\t \t 
 
\t \t <div class="css1"> 
 
\t \t \t <font style=" white-space: nowrap;">Small Foobar: </font> 
 
\t \t  <span> <input class=".text" name="small_foobar" size="20" type="text" class="hidden_textfield" value=""/> </span> 
 
     </div> 
 
\t \t <br> 
 
\t \t 
 
\t \t 
 
\t \t <div class="css1"> 
 
\t \t \t <font style=" white-space: nowrap;"> Smaller Foobar: </font> 
 
\t \t \t <span> <input class=".text" maxlength="14" name="smaller_foobar" size="14" type="text" class="hidden_textfield" value=""/> </span> 
 
     </div> 
 
\t \t <br> 
 
\t \t 
 
\t \t <div class="css1"> 
 
\t \t \t <font style=" white-space: nowrap;"> Smallest Foobar: </font> 
 
\t \t \t <span> <input class=".text" maxlength="10" name="smallest_foobar" size="35" type="text" class="hidden_textfield" value=""/> </span> 
 
     </div> 
 
\t \t <br> 
 
\t \t 
 

 
</div>