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

【问题标题】：Aligning label and textbox on same line (left and right)在同一行（左右）对齐标签和文本框
【发布时间】：2010-05-18 18:00:46
【问题描述】：

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

文本框向右对齐，但标签向左对齐并位于上一行。我该如何解决这个问题，使标签在左侧，文本框在右侧，并且两者都在同一行？

谢谢

【问题讨论】：

标签： asp.net css

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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>

【讨论】：