通过以下方式对齐 HTML 输入字段：
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10868640/
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
Align HTML input fields by :
提问by Sankar
I have a HTML form like:
我有一个 HTML 表单，如：
<html>
Name:<input type="text"/></br>
Email Address:<input type="text"/></br>
Description of the input value:<input type="text"/></br>
</html>
Now the labels all begin in the same column but the text boxes are beginning in different positions as per the label's text length.
现在标签都从同一列开始，但文本框根据标签的文本长度从不同的位置开始。
Is there a way to align the input fields such that, all the ":" and the text boxes, will begin in the same position, and the preceding text will be right aligned until the ":" ?
有没有办法对齐输入字段，使所有“：”和文本框都从同一位置开始，并且前面的文本将右对齐直到“：”？
I am okay with using CSS if that can help achieving this.
如果可以帮助实现这一点，我可以使用 CSS。
回答by DaneSoul
HTML:
HTML：
<div>
<label>Name:</label><input type="text">
<label>Email Address:</label><input type = "text">
<label>Description of the input value:</label><input type="text">
</div>
CSS:
CSS：
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
input {
display: inline-block;
float: left;
}
回答by huysentruitw
You could use a label (see JsFiddle)
您可以使用标签（请参阅JsFiddle）
CSS
CSS
label { display: inline-block; width: 210px; text-align: right; }
HTML
HTML
<html>
<label for="name">Name:</label><input id="name" type="text"><br />
<label for="email">Email Address:</label><input id="email" type="text"><br />
<label for="desc">Description of the input value:</label><input id="desc" type="text"><br />
</html>
Or you could use those labels in a table (JsFiddle)
或者你可以在表格中使用这些标签（JsFiddle）
<html>
<table>
<tbody>
<tr><td><label for="name">Name:</label></td><td><input id="name" type="text"></td></tr>
<tr><td><label for="email">Email Address:</label></td><td><input id="email" type = "text"></td></tr>
<tr><td><label for="desc">Description of the input value:</label></td><td><input id="desc" type="text"></td></tr>
</tbody>
</table>
</html>
回答by Madara's Ghost
Set a width on the form element (which should exist in your example! ) and float (and clear) the input elements. Also, drop the br elements.
在表单元素上设置宽度（它应该存在于您的示例中！）并浮动（并清除）输入元素。另外，删除 br 元素。
回答by vonwa
Using display table-cell/row will do the job without any width needed.
使用 display table-cell/row 无需任何宽度即可完成这项工作。
The html :
html：
<html>
<div>
<div class="row"><label>Name:</label><input type="text"></div>
<div class="row"><label>Email Address:</label><input type = "text"></div>
<div class="row"><label>Description of the input value:</label><input type="text"></div>
</div>
</html>
The Css :
Css：
label{
display: table-cell;
text-align: right;
}
input {
display: table-cell;
}
div.row{
display:table-row;
}
回答by maksbd19
in my case i always put these stuffs in a p tag like
就我而言，我总是将这些东西放在 ap 标签中，例如
<p>
name : < input type=text />
</p>
<p>
name : < input type=text />
</p>
and so on and then applying the css like
依此类推，然后应用 css 之类的
p {
text-align:left;
}
p input {
float:right;
}
You need to specify the width of the p tag.because the input tags will float all the way right.
您需要指定 p 标签的宽度。因为输入标签会一直浮动。
This css will also affect the submit button. You need to override the rule for this tag.
这个 css 也会影响提交按钮。您需要覆盖此标签的规则。
回答by IcyFlame
I know that this approach has been taken before, But I believe that using tables, the layout can be generated easily, Though this may not be the best practice.
我知道之前已经采取了这种方法，但我相信使用表格可以轻松生成布局，尽管这可能不是最佳实践。
HTML
HTML
<table>
<tr><td>Name:</td><td><input type="text"/></td></tr>
<tr><td>Age:</td><td><input type="text"/></td></tr>
</table>
<!--You can add the fields as you want-->
CSS
CSS
td{
text-align:right;
}
回答by Parul
I have just given width to Label and input type were aligned automatically.
我刚刚给了标签宽度，输入类型自动对齐。
input[type="text"] {
width:100px;
height:30px;
border-radius:5px;
background-color: lightblue;
margin-left:2px;
position:relative;
}
label{
position:relative;
width:300px;
border:2px dotted black;
margin:20px;
padding:5px;
font-family:AR CENA;
font-size:20px;
}<label>First Name:</label><input type="text" name="fname"><br>
<label>Last Name:</label><input type="text" name="lname"><br>