如何使文本框适合带有标签的父 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。即使在调整大小后，它也会显示标签以及 div 的文本区域。

Answer 2

没有 .text_container_border 类的 CSS 我不确定边框有多大，但是在计算宽度时必须考虑边框的大小；如果宽度为 100%，即 100% + 边框大小（左 + 右），因此可能会溢出；也就是说，如果您的边框周围有一个 n 并且它在左侧和右侧都增加了 1px，那就是 2px 的额外宽度。 CSS width 属性在这里会有所帮助，而不是 size 属性。

此外，对于有效的 HTML，标签必须与输入一起使用。给标签一个 for="" 并将其与输入中的 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">
		 <div class="css1">
			<font style=" white-space: nowrap;">Foobar Label: </font>
			<span>  <input class=".text" name="foobar_1" size="60" type="text" class="hidden_textfield" value=""/>  </span>
        </div>
		</br>
		
		 <div class="css1">
	 		<font style=" white-space: nowrap;">Foobar Label 2: </font>
			<span>  <input class=".text" name="foobar_2" size="60" type="text" class="hidden_textfield" value=""/>  </span>
         </div>  
        <br>
		
		
		<div class="css1">
			<font style=" white-space: nowrap;">Foobar Label 3: </font>
			<span>  <input class=".text" name="foobar_3" size="60" type="text" class="hidden_textfield" value=""/>  </span>
         </div>  
		 <br>
		 
		 
		<div class="css1">
			<font style=" white-space: nowrap;">Small Foobar: </font>
		    <span>  <input class=".text" name="small_foobar" size="20" type="text" class="hidden_textfield" value=""/>  </span>
         </div>  
		 <br>
		 
		 
		<div class="css1">
			<font style=" white-space: nowrap;"> Smaller Foobar: </font>
			<span>  <input class=".text" maxlength="14" name="smaller_foobar" size="14" type="text" class="hidden_textfield" value=""/>  </span>
         </div>  
		 <br>
		 
		<div class="css1">
	 		<font style=" white-space: nowrap;"> Smallest Foobar: </font>
			<span>  <input class=".text" maxlength="10" name="smallest_foobar" size="35" type="text" class="hidden_textfield" value=""/>  </span>
         </div>  
		 <br>
		 

</div>