如何将输入字段拉伸到全宽？

Question

我有一个简单的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%;
}

有任何想法吗？

Answer 1

您可以通过添加以下内容指定类"col2"的所有子项的宽度为100%:

.col2 * { width:100%;}

请参阅我的dabblet示例:http://dabblet.com/gist/2227353

Answer 2

从语义标记开始,因为这不是表格数据.此外,添加标签后,我们不需要额外的包装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/

Answer 3

您可以使用:

.col2 * {
    width: 100%;
}

匹配任何.col2后代.你可以在这里看到.要么:

.col2 > * {
    width: 100%;
}

只匹配直接的孩子.