如何使文本框符合带标签的父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>