如何将输入字段拉伸到整个宽度？

您可以指定类的所有子元素 "col2" 有宽度 100%, 通过添加以下内容：

.col2 * { width:100%;}

看到我的例子 dabblet:
http://dabblet.com/gist/2227353

从语义开始 markup, 由于这不是表格数据。 此外，我们不需要附加的包装器添加标签。 DIVs, 这是清洁的。

<ul class="formList">

<li>

<label for="input_1">

 Report Number

 </label>

<input id="input_1" name="input_1" type="text"/>

</li>

<li>

<label for="input_2">

 Report Type

 </label>

<select id="input_2" name="input_2"></select>

</li>

</ul>

然后加 CSS:

.formList {

 border:1px solid #000;

 padding:10px;

 margin:10px;

}

label {

 width:200px;

 margin-left:-200px;

 float:left;

}

input, select {

 width:100%;

}

li {

 padding-left:200px;

}

JS Fiddle 例子：
http://jsfiddle.net/6EyGK/
/

您可以使用：

.col2 * {

 width: 100%;

}

匹配任何后代

.col2

. 如你看到的
http://jsfiddle.net/darkajax/9W5M6/
. 或者：

.col2 > * {

 width: 100%;

}

仅对直接儿童相对应。

使用 Twitter

Bootstrap

:
并且输入位于列内部

只是加k。

<input/>

class="container-fluid"

笔记

这不是一个答案，而是一个评论，包括太多代码来转到评论部分。 所以请不要省略我，对吗？ :/

其他语义 markup 除了Matthew Darnell的答案之外：

如果在输入数据和选择周围缠绕标签，则可以避免使用属性

for

和

id

.

<ul class="formList">

<li>

<label>

 Report Number

 <input name="input_1" type="text">

</input></label>

</li>

<li>

<label>

 Report Type

 <select name="input_2"></select>

</label>

</li>

</ul>

或者使用可以为您提供额外控制的定义列表

<dl class="formList">

<dt>

<label for="input_1">

 Report Number

 </label>

</dt>

<dd>

<input id="input_1" name="input_1" type="text"/>

</dd>

<dt>

<label for="input_2">

 Report Type

 </label>

</dt>

<dd>

<select id="input_2" name="input_2"></select>



</dd></dl>