代码之家  ›  专栏  ›  技术社区  ›  GurdeepS

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

  •  4
  • GurdeepS  · 技术社区  · 14 年前

            <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 回复  |  直到 14 年前
        1
  •  12
  •   sathish    14 年前

    你可以使用样式

       <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
  •  1
  •   MarkB29    14 年前

    下面的方法可行。

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

    .cell
    {
    text-align:left;
    }
    
    .righttextbox
    {
    float:right;
    }
    
        3
  •  0
  •   sshow Darron Smith    14 年前

    你可以用一张桌子,像这样:

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