我有一个简单的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%;
}
有什么想法吗?
答案 0 :(得分:20)
您可以通过添加以下内容来指定“col2”类的所有子项的宽度均为100%:
.col2 * { width:100%;}
请参阅我的dabblet示例:http://dabblet.com/gist/2227353
答案 1 :(得分:8)
从语义标记开始,因为这不是表格数据。此外,添加标签后,我们不需要额外的包装DIV,它更干净。
<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小提琴示例:http://jsfiddle.net/6EyGK/
答案 2 :(得分:5)
答案 3 :(得分:3)
如果使用Twitter Bootstrap : 并且输入在列
中只需添加<input>
class="container-fluid"
答案 4 :(得分:-1)
这不是答案,而是评论,其中包含太多代码,无法进入评论部分。所以请不要低估我,是吗? :)
Matthew Darnells的其他语义标记回答:
如果您在输入中选择标签并选择,则可以避免使用for
和id
属性。
<ul class="formList">
<li>
<label>
Report Number
<input name="input_1" type="text" />
</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>
</dt>
</dl>