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％+边框尺寸（左+右）所以它可能会溢出;也就是说，如果你有一个全方位的边框并且它向左侧和右侧增加了1px，那就是2px的额外宽度。 CSS width属性在这里有所帮助，而不是size属性。

此外，对于有效的HTML，标签必须与输入一起使用。给标签a =“”并将其与输入上的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代码。它工作正常。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使文本框适合父DIV标签？

3 个答案: