在 html 中对齐文本框和文本/标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3732285/
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 textbox and text/labels in html?
提问by Nikita Rybak
I cant figure it out. How do i align the textbox? I thought using float: left on the labels on the left (then doing it on the input when i notice the input was now on the left without that) but that was completely wrong.
我想不通。如何对齐文本框？我想使用 float: left 在左边的标签上（然后在输入上做，当我注意到输入现在在左边没有那个的时候）但那是完全错误的。
How do i get the textbox align along with the labels on the left of them next to the textbox instead of the far left?
如何让文本框与文本框左侧而不是最左侧的标签对齐？
The picture is an example of what i'd like it to look like.
图片是我希望它看起来像的一个例子。
回答by Nikita Rybak
You have two boxes, left and right, for each label/input pair. Both boxes are in one row and have fixed width. Now, you just have to make label text float to the right with text-align: right;
每个标签/输入对都有左右两个框。两个盒子都在一行中并且具有固定的宽度。现在，你只需要让标签文本向右浮动text-align: right;
Here's a simple example:
这是一个简单的例子：
回答by Sergey
Using a table would be one (and easy) option.
使用表格将是一种（且简单）的选择。
Other options are all about setting fixed width on the and making it text-aligned to the right:
其他选项都是关于在 上设置固定宽度并使其文本向右对齐：
label {
width: 200px;
display: inline-block;
text-align: right;
}
or, as was pointed out, make them all float instead of inline.
或者，正如所指出的，让它们全部浮动而不是内联。
回答by Jeremy B.
you can do a multi div layout like this
你可以做一个像这样的多 div 布局
<div class="fieldcontainer">
<div class="label"></div>
<div class="field"></div>
</div>
where .fieldcontainer { clear: both; } .label { float: left; width: ___ } .field { float: left; }
其中 .fieldcontainer { 清除：两者；} .label { 浮动：左；宽度：___ } .field { 浮动：左；}
Or, I actually prefer tables for forms like this. This is very much tabular data and it comes out very clean. Both will work though.
或者，我实际上更喜欢这种表格的表格。这是非常多的表格数据，结果非常干净。两者都会起作用。
回答by Taylor Brown
I like to set the 'line-height' in the css for the divs to get them to line up properly. Here is an example of how I do it using asp and css:
我喜欢在 css 中为 div 设置“line-height”，以使它们正确排列。这是我如何使用 asp 和 css 执行此操作的示例：
ASP:
ASP：
<div id="profileRow1">
<div id="profileRow1Col1" class="righty">
<asp:Label ID="lblCreatedDateLabel" runat="server" Text="Date Created:"></asp:Label><br />
<asp:Label ID="lblLastLoginDateLabel" runat="server" Text="Last Login Date:"></asp:Label><br />
<asp:Label ID="lblUserIdLabel" runat="server" Text="User ID:"></asp:Label><br />
<asp:Label ID="lblUserNameLabel" runat="server" Text="Username:"></asp:Label><br />
<asp:Label ID="lblFirstNameLabel" runat="server" Text="First Name:"></asp:Label><br />
<asp:Label ID="lblLastNameLabel" runat="server" Text="Last Name:"></asp:Label><br />
</div>
<div id="profileRow1Col2">
<asp:Label ID="lblCreatedDate" runat="server" Text="00/00/00 00:00:00"></asp:Label><br />
<asp:Label ID="lblLastLoginDate" runat="server" Text="00/00/00 00:00:00"></asp:Label><br />
<asp:Label ID="lblUserId" runat="server" Text="UserId"></asp:Label><br />
<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox><br />
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox><br />
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox><br />
</div>
</div>
And here is the code in the CSS file to make all of the above fields look nice and neat:
这是 CSS 文件中的代码，使上述所有字段看起来漂亮整洁：
#profileRow1{width:100%;line-height:40px;}
#profileRow1Col1{float:left; width:25%; margin-right:20px;}
#profileRow1Col2{float:left; width:25%;}
.righty{text-align:right;}
you can basically pull everything but the DIV tags and replace with your own content.
您基本上可以提取除 DIV 标签之外的所有内容并替换为您自己的内容。
Trust me when I say it looks aligned the way the image in the original post does!
相信我，当我说它看起来与原始帖子中的图像对齐时！
I would post a screenshot but Stack wont let me: Oops! Your edit couldn't be submitted because: We're sorry, but as a spam prevention mechanism, new users aren't allowed to post images. Earn more than 10 reputation to post images.
我会发布一个屏幕截图，但 Stack 不允许我：哎呀！无法提交您的编辑，因为： 很抱歉，作为垃圾邮件预防机制，不允许新用户发布图片。获得超过 10 个声望来发布图片。
:)
:)
回答by Aravin
I have found better option,
我找到了更好的选择，
<style type="text/css">
.form {
margin: 0 auto;
width: 210px;
}
.form label{
display: inline-block;
text-align: right;
float: left;
}
.form input{
display: inline-block;
text-align: left;
float: right;
}
</style>
Demo here: https://jsfiddle.net/durtpwvx/
演示在这里：https: //jsfiddle.net/durtpwvx/
