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

我有一个简单的形式 HTML. 我想要第二列中的正确小部件 /文本域, combox 等等。/ 拉伸并填充整个柱。

我的 HTML 看起来像:


<table class="formTable">
<tr>
<td class="col1">Report Number</td>
<td class="col2"><input type="text"/></td>
</tr>
<tr>
<td class="col1">Report Type</td>
<td class="col2"><select></select></td>
</tr>
</table>


我的 CSS 看起来像:


.formTable {
border-color: black;
}

.formTable td {
padding: 10px;
}

.formTable .col1 {
text-align: right;
}

.formTable .col2 {
width: 100%;
}


有任何想法吗?
已邀请:

风见雨下

赞同来自:

您可以指定类的所有子元素 "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>

要回复问题请先登录注册