Html 如何将输入字段拉伸到全宽？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9910790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to stretch input field to full width?
提问by Khan
I have a simple HTML form. I'd like the right widgets in the second column (text field, combox, and so on) to stretch and fill the full column.
我有一个简单的 HTML 表单。我希望第二列（文本字段、组合框等）中的正确小部件可以拉伸并填充整个列。
My HTML looks like this:
我的 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>
My CSS looks like this:
我的 CSS 看起来像这样：
.formTable {
border-color: black;
}
.formTable td {
padding: 10px;
}
.formTable .col1 {
text-align: right;
}
.formTable .col2 {
width: 100%;
}
Any ideas?
有任何想法吗？
回答by Khan
You can specify that all of the children of class "col2" have a width of 100% by adding the following:
您可以通过添加以下内容来指定“col2”类的所有子项的宽度为 100%：
.col2 * { width:100%;}
See my dabblet example: http://dabblet.com/gist/2227353
请参阅我的 dabblet 示例：http://dabblet.com/gist/2227353
回答by Matthew Darnell
Start with semantic markup since this isn't tabular data. Also, with added labels, we don't need extra wrapper DIVs, which is cleaner.
从语义标记开始，因为这不是表格数据。此外，通过添加标签，我们不需要额外的包装 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>
Then add the CSS:
然后添加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 Example: http://jsfiddle.net/6EyGK/
JS 小提琴示例：http: //jsfiddle.net/6EyGK/
回答by DarkAjax
回答by warkentien2
if using Twitter Bootstrap: and input is inside a column
如果使用 Twitter Bootstrap：并且输入在列内
just add to <input>the class="container-fluid"
只需添加到<input>该class="container-fluid"
回答by yunzen
Note
笔记
This is not an answer, but a comment, which includes too much code to go into the comment section. So please refrain from downvoting me, would you? :)
这不是答案，而是评论，其中包含的代码太多，无法进入评论部分。所以请不要对我投反对票，好吗？:)
Other semantic markup additionaly to Matthew Darnells answer:
Matthew Darnells 回答的其他语义标记：
If you wrap the labels around the inputs and selects, you can avoid using the forand idattributes.
如果将标签包裹在输入和选择周围，则可以避免使用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>
Or use a definition list which might give you additional control
或者使用一个定义列表，它可能会给你额外的控制
<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>
