如何排列 HTML 输入元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/180647/
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 line up HTML input elements?
提问by Greg
I am hoping to find a resource for lining up input elements in a HTML page. I find it difficult to get a select element and a text box to be the same width even when using the width style attribute, and it is even more difficult across browsers. Finally, file inputs seem impossible to get to the same width cross browser. Are there any good guides or tips for accomplishing this? Perhaps there are some default CSS attributes I should be setting.
我希望找到在 HTML 页面中排列输入元素的资源。我发现即使使用宽度样式属性也很难让选择元素和文本框具有相同的宽度，而且跨浏览器更难。最后，文件输入似乎不可能在跨浏览器中达到相同的宽度。是否有任何好的指南或提示来完成此操作？也许我应该设置一些默认的 CSS 属性。
采纳答案by cowgod
I tested this out in Internet Explorer 7, Firefox 3 and Safari/Google Chrome. I definitely see the problem with <select>and <input type="file">. My findings showed that if you styled all the inputs at the same width, the <select>would be about 5 pixels shorter in all browsers.
我在 Internet Explorer 7、Firefox 3 和 Safari/Google Chrome 中对此进行了测试。我肯定看到了<select>和的问题<input type="file">。我的发现表明，如果您以相同的宽度设置所有输入的样式，则<select>在所有浏览器中都会缩短大约 5 个像素。
Using the Eric Meyer CSS reset scriptdoes not help this issue, however if you simply make your <select>inputs 5 pixels wider you'll get very good (albeit not perfect) alignment in the major browsers. The only one that differs is Safari/Google Chrome, and it appears to be 1 or 2 pixels wider than all the other browsers.
使用Eric Meyer CSS 重置脚本并不能解决这个问题，但是如果您只是将<select>输入宽 5 个像素，您将在主要浏览器中获得非常好的（尽管并不完美）对齐。唯一不同的是 Safari/Google Chrome，它似乎比所有其他浏览器宽 1 或 2 个像素。
As far as the <input type="file">is concerned, you don't have much flexibility with styling there. If JavaScript is an option for you, you can implement the method shown on quirksmodeto achieve greater control over the styling of the file upload control.
至于<input type="file">而言，你没有与造型有很大的灵活性。如果 JavaScript 是您的一个选项，您可以实现quirksmode 中显示的方法，以更好地控制文件上传控件的样式。
See my full working example below in XHTML 1.0 Strict for a typical form with consistent input widths. Note that this does not use the 100% width trick pointed out by others here because it has the same problem with inconsistent widths. Additionally there are no tables used to render the form as tables should only be used for tabular data and not layout.
请参阅下面 XHTML 1.0 Strict 中的完整工作示例，了解具有一致输入宽度的典型表单。请注意，这并没有使用其他人在这里指出的 100% 宽度技巧，因为它具有相同的宽度不一致问题。此外，没有用于呈现表单的表格，因为表格应该仅用于表格数据而不是布局。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Form</title>
<style type="text/css">
label,
input,
select,
textarea {
display: block;
width: 200px;
float: left;
margin-bottom: 1em;
}
select {
width: 205px;
}
label {
text-align: right;
width: 100px;
padding-right: 2em;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<form action="#">
<fieldset>
<legend>User Profile</legend>
<label for="fname">First Name</label>
<input id="fname" name="fname" type="text" />
<br class="clear" />
<label for="lname">Last Name</label>
<input id="lname" name="lname" type="text" />
<br class="clear" />
<label for="fav_lang">Favorite Language</label>
<select id="fav_lang" name="fav_lang">
<option value="c#">C#</option>
<option value="java">Java</option>
<option value="ruby">Ruby</option>
<option value="python">Python</option>
<option value="perl">Perl</option>
</select>
<br class="clear" />
<label for="bio">Biography</label>
<textarea id="bio" name="bio" cols="14" rows="4"></textarea>
<br class="clear" />
</fieldset>
</form>
</body>
</html>回答by Ron Savage
I usually put them inside a div or table cell (horrors! I know) of the width I want, then set the select and input style:width to 100% so they fill the div / cell they are in.
我通常将它们放在我想要的宽度的 div 或表格单元格中（可怕！我知道），然后将选择和输入样式：宽度设置为 100%，以便它们填充它们所在的 div/单元格。
回答by Dalius
I found that if you set selectand inputelement border and padding to 0, they are same width. (Tested on Chrome 14, Firefox 7.0.1, Opera 11.51, IE 9)
我发现如果将select和input元素边框和填充设置为 0，它们的宽度相同。（在 Chrome 14、Firefox 7.0.1、Opera 11.51、IE 9 上测试）
Putting 1px border/padding on select and input elements makes input element 2 pixels wider. For example:
在 select 和 input 元素上放置 1px 边框/填充会使 input 元素宽 2 像素。例如：
<form class="style">
<input name="someInput" />
<select name="options">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
</form>
.style select {
width: 100px;
padding: 1px;
border: 1px solid black;
}
.style input {
width: 96px; /* -2 px for 1px padding(1px from each side) and -2px for border
(select element seems to put border inside, not outside?) */
padding: 1px;
border: 1px solid black;
}
回答by Matthew Scharley
回答by mmacaulay
File inputs can be fundamentally different across browsers and definitely don't allow much in the way of customization, which can be annoying, but I also understand why that is from a security perspective. For example, try changing the text of the "browse" button that appears on most browsers, or compare the file input on Safari to other browsers...
不同浏览器的文件输入可能有根本的不同，并且绝对不允许太多自定义方式，这可能很烦人，但我也理解为什么这是从安全角度来看的。例如，尝试更改出现在大多数浏览器上的“浏览”按钮的文本，或者将 Safari 上的文件输入与其他浏览器进行比较......
回答by Dave Rutledge
Do you start your CSS files with some base settings? It may be useful to turn padding and margin off on all elements. I haven't tested to see if this could be affecting select / input elements.
您是否使用一些基本设置开始您的 CSS 文件？关闭所有元素的填充和边距可能很有用。我还没有测试过这是否会影响选择/输入元素。
Here's an example CSS Reset from Eric Meyer:
这是 Eric Meyer 的 CSS 重置示例：
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
回答by Slawa
If you desperately need { width: 100%; } and not specified with widths in pixels, then jQuery is your friend:
如果你迫切需要 { width: 100%; 并且没有以像素为单位指定宽度，那么 jQuery 就是你的朋友：
$(function () {
var allSelects = $('input[type="text"], textarea');
allSelects.css('width', (allSelects.width()-6)+'px');
}
-6 pixels works best for me (FF9), edit as you see fit.
-6 像素最适合我 (FF9)，根据您的需要进行编辑。
回答by Jim
This is because with an <input>, the border and padding is added on to the width (like with most other elements). With a <select>, the border and padding is included in the width, just like in the old IE quirks mode.
这是因为使用 <input> 时，边框和填充会添加到宽度上（与大多数其他元素一样）。使用 <select>，边框和内边距包含在宽度中，就像在旧的 IE 怪癖模式中一样。
You can get round this by increasing the width to take account of this:
您可以通过增加宽度来解决这个问题：
input { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }
Or (if you can rely on browser support) you can use the new CSS3 box-sizing property to make them behave consistently, and draw padding and border outside of the element width:
或者（如果您可以依靠浏览器支持）您可以使用新的 CSS3 box-sizing 属性使它们的行为一致，并在元素宽度之外绘制填充和边框：
input, select {
width: 200px;
padding: 10px;
border-width:5px;
-webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: content-box; /* Firefox, other Gecko */
box-sizing: content-box; /* Opera/IE 8+ */
}
Alternatively, you can set box-sizing to border-box to make the inputs behave like the selects, with padding drawn inside the width of the box.
或者，您可以将 box-sizing 设置为 border-box 以使输入的行为类似于选择，并在框的宽度内绘制填充。
Tested in Chrome, IE8, FF
在 Chrome、IE8、FF 中测试
回答by AlfaTeK
I don't think Ron'sidea works...
我认为罗恩的想法行不通……
test case:
测试用例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link href="styles/reset.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
input, select{
width: 100%;
}
</style>
</head>
<body>
<div style="width: 200px;">
<input type="text">
<select>
<option>asdasd</option>
<option>asdasd</option>
</select>
</div>
</body>
</html>
This results in the input being some px wider than the select (this is probably OS-dependent). I'm not sure if this could be achieved, even with the +5px trick as the styling of the select seems to be OS (at least windows theme) dependent.
这导致输入比选择宽一些 px（这可能取决于操作系统）。我不确定这是否可以实现，即使使用 +5px 技巧，因为选择的样式似乎依赖于操作系统（至少是 Windows 主题）。
