CSS 如何将网页上的文本框与标签正确对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2797189/
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 properly align textboxes on a webpage with labels
提问by Grant
this is a CSS / design question. I have three textboxes that i want to be center aligned on a web page. Then i want a label description to the right of each one.
这是一个 CSS / 设计问题。我有三个要在网页上居中对齐的文本框。然后我想要每个标签右侧的标签描述。
When i use attribute like text:align:centre because the labels are of different length it throws out the aligment of the textboxes [see image link below]
当我使用像 text:align:centre 这样的属性时，因为标签的长度不同，它会抛出文本框的对齐 [见下面的图片链接]
http://www.mediafire.com/imageview.php?quickkey=qcyoajm2iuk
http://www.mediafire.com/imageview.php?quickkey=qcyoajm2iuk
Is there an easy way of keeping the textboxes aligned and then have the labels off the to the right without changing the textboxes?
有没有一种简单的方法可以保持文本框对齐，然后在不更改文本框的情况下将标签从右侧移开？
Thanks.
谢谢。
回答by meo
basically you have to define a width for your form and float: leftinput and float: rightthe label, so the label gets next to your input. The is a trick to center relative possitionet elements in CSS: margin: 0 autobut you have to define a width.
基本上你必须为你的表单和float: left输入以及float: right标签定义一个宽度，这样标签就在你的输入旁边。这是在 CSS 中将相对 possitionet 元素居中的一个技巧：margin: 0 auto但是你必须定义一个宽度。
The problem you gonna have is that all your inputs are gonna be next to each other. In order to prevent that you nest your label and input in a element. And clear the floats. I would use a UL LI element and not Paragraphs (like in PW example), because most of the time, your form, is a list of questions.
您将遇到的问题是您的所有输入都将彼此相邻。为了防止您将标签和输入嵌套在元素中。并清除漂浮物。我会使用 UL LI 元素而不是段落（就像在 PW 示例中一样），因为大多数时候，您的表单是一个问题列表。
I have made up an example for you: http://jsfiddle.net/Qs4pk/2/
我为你编了一个例子：http: //jsfiddle.net/Qs4pk/2/
回答by PW.
use the <fieldset>tag in combination with <label>. Step by step explanation.
Then align at will.
将<fieldset>标记与 结合使用<label>。一步一步的解释。
然后随意对齐。
回答by Markive
In your screenshot, you have text-align:centred each element inside a div. So you are seeing the correct behaviour for your current approach.
在您的屏幕截图中，您将 text-align:centred 放在 div 中的每个元素。因此，您看到了当前方法的正确行为。
Instead you need to centre a div (the encompassing box of your textbox and label elements) and then left-align (which will be the browser default) the internal elements.
相反，您需要将一个 div（文本框和标签元素的包围框）居中，然后左对齐（这将是浏览器默认值）内部元素。
To centre a div use:
居中 div 使用：
#content {
width: 700px ; margin-left: auto ; margin-right: auto ; }
宽度：700px；左边距：自动；右边距：自动；}
回答by reisio
http://reisio.com/temp/form2.html
http://reisio.com/temp/form2.html
<!doctype html>
<html>
<head>
<title></title>
<style>
body {
margin: 8px;
padding: 0;
}
form {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
font: 12px sans-serif;
display: block !important;
display: inline-block;
overflow: hidden;
}
li {
float: left;
clear: left;
}
label {
display: block;
width: 200px;
height: 19px;
line-height: 19px;
position: relative;
margin: 0 0 5px;
cursor: pointer;
text-align: right;
}
input {
width: 120px;
position: absolute;
left: 0;
top: 0;
border: 1px solid gray;
padding: 1px 0;
height: 15px;
font: 12px sans-serif;
}
</style>
</head>
<body>
<form action="">
<ul>
<li>
<label><input> Beans</label>
</li>
<li>
<label><input> Cornbread</label>
</li>
</ul>
</form>
</body>
</html>
回答by Oleg
You question have also a design aspect. What is the best alignment of labels and input textboxes from the users point of view? I was very surprised some months ago as I found "Web Form Design" at MIX09 (see http://videos.visitmix.com/MIX09/C17F). You will see on examples how to improve user experience if one place labels and input textboxes in other places. This video just changed my mind in this area. You can also look at http://www.lukew.com/presos/and "Best Practices for Hints and Validation in Web Forms" http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/which some has close information.
你的问题也有一个设计方面。从用户的角度来看，标签和输入文本框的最佳对齐方式是什么？几个月前，当我在 MIX09 找到“Web 表单设计”时，我感到非常惊讶（请参阅http://videos.visitmix.com/MIX09/C17F）。您将在示例中看到如果在其他地方放置标签和输入文本框，如何改善用户体验。这个视频刚刚改变了我对这个领域的看法。您还可以查看http://www.lukew.com/presos/和“Web 表单中提示和验证的最佳实践” http://sixrevisions.com/user-interface/best-practices-for-hints-and -validation-in-web-forms/其中一些信息很接近。
