使用css标签和输入布局 [英] Label and input layout using css

问题描述

我试图在同一行上排列一个标签和一个输入框，以使标签占据所需的所有空间，然后输入框使用所有剩余的空间。例如，如果容器为1000像素，标签为342像素，则输入宽度应为658像素。但是，如果标签更改为100px，则输入应调整为900px。我可以使用表格布局来做到这一点，或者在标签宽度发生变化时使用JavaScript来调整输入框的大小，但理想情况下我只想使用CSS来做到这一点。我的html看起来像这样。

 < div id =container> 
< label for =inputBox>变量文本< / label> 
< input type =textid =inputBox/> 
< / div> 
  

感谢，

编辑：说明我在这里要做的是使用表格的例子。

 < table style =background-color：＃ DDD;宽度：500像素;> 
< tr> 
< td style =width：0; white-space：nowrap;>< label style =width：100％> text< / label>< / td> 
< td>< input style =width：100％type =text/>< / td> 
< / tr> 
< / table> 
  

解决方案

正确的方法是：

  #container {width：1000px; display：table} 
 #container label {display：table-cell;白色空间：nowrap; } 
 #inputBox {width：100％; display：table-cell; } 
  

但在IE 6或7中无法使用。

I'm trying to line up a label and an input box on the same line in such a way that the label takes up all the space it needs and then the input box uses all of the remaining space. For example if the container was 1000px and the label was 342px then the input should be 658px wide. But if the label changed to 100px the input should resize to 900px. I could do this using a table layout, or using JavaScript to resize the input box when the label width changes but ideally I would like to do this using only css. My html looks like this.

<div id="container">
  <label for="inputBox">variable text</label>
  <input type="text" id="inputBox" />
</div>

Thanks,

Edit: To help illustrate what I'm trying to do here is an example using tables.

<table style="background-color:#ddd;width:500px;">
  <tr>
    <td style="width:0;white-space:nowrap;"><label style="width:100%">text</label></td>
    <td><input style="width:100%" type="text" /></td>
  </tr>
</table>

解决方案

The correct way would be:

#container  { width: 1000px; display: table }
#container label  { display: table-cell; white-space: nowrap; }
#inputBox  { width: 100%; display: table-cell; }

but that won't work in IE 6 or 7.

这篇关于使用css标签和输入布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！