在同一行(左右)对齐标签和文本框

时间:2010-05-18 09:42:28

标签: asp.net css

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

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

由于

3 个答案:

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