Question

我有一个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>

文本框与右侧对齐，但标签与左侧和上方的线对齐。如何解决这个问题，使标签位于左侧，文本框位于右侧，两者都在同一条线上？

由于

Answer 1

你可以使用风格

   <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>

Answer 2

您应该使用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;
}

Answer 3

您可以使用表格来完成此操作：

<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>

在同一行（左右）对齐标签和文本框

3 个答案: