CSS 在 HTML 中选择输入和文本输入 - 使宽度相等的最佳方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/895904/
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
Select inputs and text inputs in HTML - Best way to make equal width?
提问by alex
I've got a simple form like so (illustrative purposes only)...
我有一个像这样的简单表格（仅用于说明目的）...
<form>
<div class="input-row">
<label>Name</label>
<input type="text" name="name" />
</div>
<div class="input-row">
<label>Country</label>
<select name="country">
<option>Australia</option>
<option>USA</option>
</select>
</div>
</form>
My layout method using CSS is as follows...
我使用CSS的布局方法如下...
form {
width: 500px;
}
form .input-row {
display: block;
width: 100%;
height: auto;
clear: both;
overflow: hidden; /* stretch to contain floated children */
margin-bottom: 10px;
}
form .input-row label {
display: block;
float: left;
}
form .input-row input,
form .input-row select {
display: block;
width: 50%;
float: right;
padding: 2px;
}
This all aligns quite nicely, except my selectelement (in Firefox anyway) isn't always the same width as my other inputelements. It generally is narrower by a few pixels.
这一切都很好地对齐，除了我的select元素（无论如何在 Firefox 中）并不总是与我的其他input元素的宽度相同。它通常窄几个像素。
I've tried changing the width to a pixel size (e.g. 200px) but it has not made a difference.
我尝试将宽度更改为像素大小（例如200px），但没有任何区别。
What is the best way to get these to all have the same width? I hope it doesn't resort to me setting the select's widthindividually, or putting them into tables...
让这些都具有相同宽度的最佳方法是什么？我希望它不会求助于我单独设置select'swidth或将它们放入表格中...
回答by Kornel
The solution is to specify box model for form elements, and browsers tend to agree most when you use border-box:
解决方案是为表单元素指定框模型，浏览器在使用border-box时往往最同意：
input, select, textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
There's normalize.cssproject that aggregates such tricks.
有一个normalize.css项目聚合了这些技巧。
回答by Luke Schafer
padding will make the text be closer to the edge of the box.
填充将使文本更接近框的边缘。
try setting the margin to 0px, and if that seems right, play around with it (like just setting margin-left only)
尝试将边距设置为 0px，如果这看起来正确，请使用它（就像只设置边距左）
回答by Herman Cordes
Had same problems with 100% width table and cells, with a textbox (also with width at 100%) wider than the table cell.
100% 宽度的表格和单元格有同样的问题，文本框（宽度也为 100%）比表格单元格宽。
This solved my problem in the css:
这解决了我在 css 中的问题：
table td
{
padding-right: 8px;
}
Not the best solution ever, cause you probably get some additional space to the right side. But at least it's not hiding anymore!
不是最好的解决方案，因为您可能会在右侧获得一些额外的空间。但至少它不再隐藏了！
