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

时间:2012-03-28 15:27:48

标签: html css

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

有什么想法吗?

5 个答案:

答案 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)

您可以使用:

.col2 * {
    width: 100%;
}

匹配任何.col2后代。正如您所见here。或者:

.col2 > * {
    width: 100%;
}

只匹配直接的孩子。

答案 3 :(得分:3)

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

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

即可

答案 4 :(得分:-1)

注意

这不是答案,而是评论,其中包含太多代码,无法进入评论部分。所以请不要低估我,是吗? :)

Matthew Darnells的其他语义标记回答:

如果您在输入中选择标签并选择,则可以避免使用forid属性。

<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>