我有一个ASP.NET控件。我想将文本框右侧和左侧的标签对齐。
到目前为止我有这个代码:
<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>
文本框与右侧对齐,但标签与左侧和上方的线对齐。如何解决这个问题,使标签位于左侧,文本框位于右侧,两者都在同一条线上?
由于
答案 0 :(得分:11)
你可以使用风格
<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>
答案 1 :(得分:1)
您应该使用CSS来对齐文本框。上面的代码不起作用的原因是因为默认情况下div的宽度与它所在的容器相同,因此在你的例子中它被推到下面。
以下方法可行。
<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>
在CSS文件中:
.cell
{
text-align:left;
}
.righttextbox
{
float:right;
}
答案 2 :(得分:0)
您可以使用表格来完成此操作:
<table width="100%">
<tr>
<td style="width: 50%">Left Text</td>
<td style="width: 50%; text-align: right;">Right Text</td>
</tr>
</table>
或者,您可以使用CSS这样做:
<div style="float: left;">
Left text
</div>
<div style="float: right;">
Right text
</div>