Html 在 CSS 中将文本和选择框对齐到相同的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10001291/
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
Aligning text and select boxes to the same width in CSS?
提问by zuallauz
Ok this is seemingly impossible to get right. I have a text box and a select box. I want them to be the same width exactly so they line up on the left margin and the right margin.
好吧，这似乎是不可能做到的。我有一个文本框和一个选择框。我希望它们的宽度完全相同，以便它们在左边距和右边距上对齐。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
</select>
</body>
</html>
That would do it you think, right? Nope. The select box is 6px shorter in Firefox. See screenshot. 
你认为会这样做，对吗？不。Firefox 中的选择框短 6px。见截图。
Ok so lets edit the code and make two styles.
好的，让我们编辑代码并制作两种样式。
<style type="text/css">
input {
width: 200px;
}
select {
width: 206px;
}
</style>
Ok that works!
好的，有效！
Oh wait, better test in Chrome...
哦等等，最好在 Chrome 中测试...
Can someone tell me how to line these up in all browsers? Why can't I just do width: 200px on all, why do all the browsers display it differently? Also while we're at it why is the text box and select box different heights? How do we get them to the same height? Have tried height and line-height no no avail.
有人能告诉我如何在所有浏览器中排列这些吗？为什么我不能只做 width: 200px ，为什么所有浏览器都显示不同？另外，虽然我们在这里，为什么文本框和选择框的高度不同？我们如何让它们达到相同的高度？试过 height 和 line-height 无济于事。
Solution:
解决方案：
Ok I've found the solution with some help from the answers below. The key is to use the box-sizing: border-boxproperty so when you specify the width that includesthe border and padding. See excellent explanation here. Then the browser can't stuff it up.
好的，我在以下答案的帮助下找到了解决方案。关键是使用box-sizing: border-box属性，以便在指定包含边框和填充的宽度时。请参阅此处的出色解释。然后浏览器不能把它塞进去。
Code is below, have also set the height of the boxes to the same size and indented the text inside the box so it lines up. You also need to set the border as Chrome has a really weird looking border it uses for select boxes which will throw out the alignment. This will work for HTML5 sites (e.g. supporting IE9, Firefox, Chrome, Safari, Opera etc).
代码如下，还将框的高度设置为相同的大小，并将框内的文本缩进以使其对齐。您还需要设置边框，因为 Chrome 有一个看起来非常奇怪的边框，它用于选择框，这将抛出对齐。这将适用于 HTML5 站点（例如支持 IE9、Firefox、Chrome、Safari、Opera 等）。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
border: 1px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 4px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
<option>123456789 123123123123</option>
<option>123456789 123123123123 134213721381212</option>
</select>
</body>
</html>
Just one final warning you may not want input buttons, checkboxes etc to be included in this styling so use the input:not([type='button'])to not apply it to certain types or use input[type='text'], input[type='password']to specify ones you do want it to apply to.
最后一个警告，您可能不希望在此样式中包含输入按钮、复选框等，因此请使用input:not([type='button'])不将其应用于某些类型或用于input[type='text'], input[type='password']指定您确实希望将其应用于的类型。
采纳答案by Chris Cannon
This is because the <input type="text" />element has a slightly different default style to the <select>element e.g. the border, padding and margin values may be different.
这是因为<input type="text" />元素与元素的默认样式略有不同，<select>例如边框、填充和边距值可能不同。
You can observe these default styles through an element inspector such as Firebug for Firefox or the built-in one for Chrome. Futhermore, these default stylesheets differ from browser to browser.
您可以通过元素检查器（例如用于 Firefox 的 Firebug 或用于 Chrome 的内置检查器）观察这些默认样式。此外，这些默认样式表因浏览器而异。
You have two options:
您有两个选择：
- Explicitly set the border, padding and margin values to be the same for both elements
- A CSS reset stylesheet to be included before your own CSS stylesheets
- 将两个元素的边框、填充和边距值显式设置为相同
- 在您自己的 CSS 样式表之前包含的 CSS 重置样式表
I would go with option 1. because option 2. requires a lot of work and you'll end up with tons of unnecessary CSS. But some web developers prefer to start from scratch and have complete control.
我会选择选项 1。因为选项 2. 需要大量的工作，你最终会得到大量不必要的 CSS。但是一些 Web 开发人员更喜欢从头开始并拥有完全的控制权。
回答by saluce
This will get you close, but that level of precision is nearly impossible.
这将使您接近，但这种精度水平几乎是不可能的。
<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div>
<div style="width: 200px">
<select id="Select1" style="width: 100%; margin: 0; padding: 0">
<option>1</option>
</select>
</div>
回答by Thomas Upton
Different browsers apply different styles by default. I found that resetting both margin and padding to 0 makes both elements equal widths in both Firefox and Chrome.
不同的浏览器默认应用不同的样式。我发现将边距和填充都重置为 0 会使两个元素在 Firefox 和 Chrome 中的宽度相等。
<html>
<head>
<title>Test</title>
<style type="text/css">
input, select {
margin: 0;
padding: 0;
width: 200px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br />
<select>
<option>123</option>
</select>
</body>
</html>
I personally like to use a minimal CSS reset stylesheet like YUI CSS Resetbefore attempting to make a design look great in multiple browsers.
在尝试使设计在多个浏览器中看起来很棒之前，我个人喜欢使用像YUI CSS Reset这样的最小 CSS 重置样式表。
回答by Matt Jameson
Add a class to both the select and input tags in question ie:
向有问题的选择和输入标签添加一个类，即：
<input class='custom-input'/>
<select class='custom-input'></select>
then modify the css below to fit your design:
然后修改下面的 css 以适合您的设计：
.custom-input {
width:140px;
border:1px solid #ccc;
margin:1px;
padding:3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
}
obvs this is a fix for supporting browsers
obvs 这是支持浏览器的修复程序
回答by Sid Lori
Yes, extremely frustrating. However, I never had problems with that 'till I put a "<!DOCTYPE html>" tag at the top of my HTML page. My webpage rendered properly on all platforms that I could test until I put that tag at the top of my document.
是的，非常令人沮丧。然而，我从来没有遇到过这个问题，直到我在 HTML 页面的顶部放置了一个“<!DOCTYPE html>”标签。我的网页在我可以测试的所有平台上都正确呈现，直到我将该标签放在我的文档顶部。
While that's "genuine spec", it seems to be the source of these alignment problems. FWIW, I'm using HTML5 elements, in-line CSS, etc., all without that tag to specify HTML5. YMMV.
虽然这是“真正的规范”，但它似乎是这些对齐问题的根源。FWIW，我正在使用 HTML5 元素、内嵌 CSS 等，但都没有使用该标签来指定 HTML5。天啊。
回答by Anonymous
If u use tables 4 inputs u could use the following solution - also compatable with ie7:
如果您使用表 4 输入，您可以使用以下解决方案 - 也与 ie7 兼容：
<tr style="width:1px;"><td style="width:inherit;position:relative;">
<select style="width:100%;">
</select>
</td></tr>
<tr><td>
<input type="text" style="width:150px;"/>
</td></tr>
That way the table cell width will be fixated to the width of the input,
这样表格单元格宽度将固定到输入的宽度，
And that way the select would therefore always take the remaining width and perfectly line up with d input.
这样，选择将始终采用剩余的宽度并与 d 输入完美对齐。
回答by dotNET Lady
Try removing the default borders from both elements:
尝试从两个元素中删除默认边框：
select, input {
border:0;
}
