CSS 在同一行（左右）上对齐标签和文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2856062/
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 label and textbox on same line (left and right)
提问by GurdeepS
I have an ASP.NET control. I want to align the textbox to the right and the label to the left.
我有一个 ASP.NET 控件。我想将文本框向右对齐，将标签向左对齐。
I have this code so far:
到目前为止我有这个代码：
<td colspan="2">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
<div style="text-align: right">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</div>
</td>
The textbox aligns to the right, but the label aligns to the left and on the line above. How can I fix this so that the label is on the left, the textbox on the right, and both on the same line?
文本框向右对齐，但标签向左对齐并位于上一行。我该如何解决这个问题，以便标签在左侧，文本框在右侧，并且都在同一行上？
Thanks
谢谢
回答by sathish
you can use style
你可以使用样式
<td colspan="2">
<div style="float:left; width:80px"><asp:Label ID="Label6" runat="server" Text="Label"></asp:Label></div>
<div style="float: right; width:100px">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
</div>
<div style="clear:both"></div>
</td>
回答by MarkB29
You should use CSS to align the textbox. The reason your code above does not work is because by default a div's width is the same as the container it's in, therefore in your example it is pushed below.
您应该使用 CSS 来对齐文本框。您上面的代码不起作用的原因是因为默认情况下 div 的宽度与其所在的容器相同，因此在您的示例中，它被推到下面。
The following would work.
以下将起作用。
<td colspan="2" class="cell">
<asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
<asp:TextBox ID="TextBox3" runat="server" CssClass="righttextbox"></asp:TextBox>
</td>
In your CSS file:
在您的 CSS 文件中：
.cell
{
text-align:left;
}
.righttextbox
{
float:right;
}
回答by sshow
You can do it with a table, like this:
你可以用一张桌子来做，就像这样：
<table width="100%">
<tr>
<td style="width: 50%">Left Text</td>
<td style="width: 50%; text-align: right;">Right Text</td>
</tr>
</table>
Or, you can do it with CSS like this:
或者，您可以像这样使用 CSS 来实现：
<div style="float: left;">
Left text
</div>
<div style="float: right;">
Right text
</div>
