如何使文本框符合帶標籤的父DIV？

Question

這是我用於生成內容區寬度爲100％的div的代碼，並且它周圍有一個很薄的灰色邊框。裏面有一堆輸入。如果您注意到，每個輸入都有指定的大小。如果您的屏幕尺寸與我的尺寸完全一樣，並且您的瀏覽器甚至不會輕微最小化，它就可以完美運行。當這些事情發生時，輸入將呈現在標籤下方，表單變得混亂。

我找不出一種方法來使這些文本框的寬度變爲動態，以便文本框符合標籤之後父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。它顯示標籤與股利，即使調整後的文本區域一起。

Answer 2

沒有CSS的類.text_container_border我不確定邊框有多大，但在計算寬度時必須考慮邊框的大小;如果寬度爲100％，即100％+邊框尺寸（左+右），則可能溢出;也就是說，如果你有一個n圍繞邊界，並且左右兩邊都加1px，那就是2px的額外寬度。 CSS width屬性在這裏會有所幫助，而不是size屬性。

此外，對於有效的HTML標籤必須與輸入一起使用。給出= 「標籤中的」，它匹配一個id輸入：

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

這裏是一個小提琴：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>