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后代。正如您所见here。或者：

.col2 > * {
    width: 100%;
}

只匹配直接的孩子。

Answer 4

如果使用Twitter Bootstrap ：并且输入在列

中

只需添加<input> class="container-fluid"

即可

Answer 5

注意

这不是答案，而是评论，其中包含太多代码，无法进入评论部分。所以请不要低估我，是吗？：）

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>

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

5 个答案:

注意