Question

很抱歉在这里问一些基本的东西，但我无法在格式化控件中应用正确的方法。

以下是ASPX页面中代码的一部分。我没有正确格式化它。我需要一些关于考虑什么以及如何做的帮助。以下是输出结果。

enter image description here

我希望文本框（或下拉列表）正确对齐标签。我知道我没有在这里使用样式表，但想知道我是否可以在没有样式表的情况下实现。即使要求样式表来实现格式化，也请建议考虑什么以及如何继续。

ASPX页面的内容如下：

<div runat="server" id="DivCCInfo">
<fieldset class="CreditCardInformation">
    <legend>
        <asp:Literal runat="server" ID="CCHeaderLabel" Text= "Credit Card Information" />
    </legend>
    <div>
        <asp:Label ID="CreditCardHolderLabel" runat="server" AssociatedControlID="CreditCardHolder" Text="Cardholder's Name" />
        <br />
        <asp:TextBox ID="CreditCardHolder" runat="server" CssClass="TextBox" MaxLength="30" Width="300" style ="left:-100px" ></asp:TextBox>
        <asp:Label ID="CreditCardTypeLabel" runat="server" AssociatedControlID="CreditCardType" Text="Credit Card Type" />
        <asp:Label ID="CreditCardNumberLabel" runat="server" AssociatedControlID="CreditCardNumber" Text="Credit Card Number" />
        <asp:Label ID="ExpirationLabel" runat="server" AssociatedControlID="ExpirationMonth" Text="Expiration Date"  />
        <asp:Label ID="CVVLabel" runat="server" AssociatedControlID="CVV" Text="CVV Code" />
        <br /><br />
        <asp:DropDownList runat="server" ID="CreditCardType"  Width="105">
            <asp:ListItem Text="VISA"  Value="VISA" />
            <asp:ListItem Text="MasterCard" Value="MasterCard" />
            <asp:ListItem Text="Discover" Value="Discover" />
            <asp:ListItem Text="Amex" Value="Amex" />
        </asp:DropDownList>
        <asp:TextBox ID="CreditCardNumber" runat="server" CssClass="TextBox" MaxLength="16" Width="120"></asp:TextBox>
        <asp:DropDownList runat="server" ID="ExpirationMonth" Width="40">
            <asp:ListItem Text="01" Value="01" />
            <asp:ListItem Text="02" Value="02" />
        </asp:DropDownList>
        <asp:DropDownList runat="server" ID="ExpirationYear" Width="60">
            <asp:ListItem Text="2012" Value="2012" />
            <asp:ListItem Text="2013" Value="2013" />
        </asp:DropDownList>

        <asp:TextBox ID="CVV" runat="server" CssClass="TextBox"   MaxLength="4" Width="50"></asp:TextBox>
    </div>
</fieldset>

Answer 1

我可以使用<table> HTML元素看到一种快速的方法：

这样的事情：

<table>
    <tr>
        <td>
            <asp:Label
                 ID="CreditCardTypeLabel"
                 runat="server"
                 AssociatedControlID="CreditCardType"
                 Text="Credit Card Type" />
        </td>
        <td>
            <asp:Label
                 ID="CreditCardNumberLabel"
                 runat="server"
                 AssociatedControlID="CreditCardNumber"
                 Text="Credit Card Number" />
        </td>
        <td>
            <asp:Label
                 ID="ExpirationLabel"
                 runat="server"
                 AssociatedControlID="ExpirationMonth"
                 Text="Expiration Date"  />
        </td>
        <td>
            <asp:Label
                 ID="CVVLabel"
                 runat="server"
                 AssociatedControlID="CVV"
                 Text="CVV Code" />
        </td>
    </tr>
    <tr>
        <td>
            <asp:DropDownList
                 runat="server"
                 ID="CreditCardType"
                 Width="105">
                 <asp:ListItem
                      Text="VISA"
                      Value="VISA" />
                 <asp:ListItem 
                      Text="MasterCard"
                      Value="MasterCard" />
                 <asp:ListItem
                      Text="Discover"
                      Value="Discover" />
                 <asp:ListItem
                      Text="Amex"
                      Value="Amex" />
             </asp:DropDownList>
        </td>
        <td>
            <asp:TextBox
                 ID="CreditCardNumber"
                 runat="server"
                 CssClass="TextBox"
                 MaxLength="16"
                 Width="120">
             </asp:TextBox>
        </td>
        <td>
            <asp:DropDownList
                 runat="server"
                 ID="ExpirationMonth"
                 Width="40">
                 <asp:ListItem
                      Text="01"
                      Value="01" />
                 <asp:ListItem
                      Text="02"
                      Value="02" />
             </asp:DropDownList>
             <asp:DropDownList runat="server" ID="ExpirationYear" Width="60">
                  <asp:ListItem Text="2012" Value="2012" />
                  <asp:ListItem Text="2013" Value="2013" />
             </asp:DropDownList>
        </td>
        <td>
            <asp:TextBox
                 ID="CVV"
                 runat="server"
                 CssClass="TextBox"
                 MaxLength="4"
                 Width="50">
             </asp:TextBox>
        </td>
    </tr>
</table>

只需将控件放在表格元素中，它们就会完美对齐，如果您愿意，甚至可以左/中/右对齐它们。

Answer 2

如果你真的不想使用CSS，你可以尝试这样的事情

将标签的宽度设置为

       <asp:Label ID="CreditCardNumberLabel" runat="server" AssociatedControlID="CreditCardNumber" Text="Credit Card Number" Width="200"/>

将文本框的宽度设置为相同的宽度

        <asp:TextBox ID="CreditCardNumber" runat="server" CssClass="TextBox" MaxLength="16" Width="200"></asp:TextBox>

现在编写带有设置宽度的HTML标签然后空格 然后另一个带有设置宽度的标签，下一行是设置宽度的文本框，然后是空格 

我不推荐使用表格来设置样式表格，我会坚持使用表格来显示数据表格

此外我还没有在asp.net中使用Width属性，我通常使用css，它可能没有在你的代码中正确设置我认为它可能是Width="120px"而不是{{1} }

Answer 3

您可以使用div显式设置宽度，也可以使用float：left，也可以使用表格建议。随意地将物品放在没有容器的页面上并期望让它们对齐是一种微弱且浪费时间的尝试。

这是一种可能性（未经测试并根据需要调整div大小）：

<div>
<div style="margin-bottom: 20px;">
    <asp:Label ID="CreditCardHolderLabel" runat="server" AssociatedControlID="CreditCardHolder" Text="Cardholder's Name" />
    <br />
    <asp:TextBox ID="CreditCardHolder" runat="server" CssClass="TextBox" MaxLength="30" Width="300" style ="left:-100px" ></asp:TextBox>
</div>
<div style="clear: both; width: 200px;">
    <asp:Label ID="CreditCardTypeLabel" runat="server" AssociatedControlID="CreditCardType" Text="Credit Card Type" />
    <br />
     <asp:DropDownList runat="server" ID="CreditCardType"  Width="105">
        <asp:ListItem Text="VISA"  Value="VISA" />
        <asp:ListItem Text="MasterCard" Value="MasterCard" />
        <asp:ListItem Text="Discover" Value="Discover" />
        <asp:ListItem Text="Amex" Value="Amex" />
    </asp:DropDownList>
</div>
<div style="float: left; width: 200px;">
    <asp:Label ID="CreditCardNumberLabel" runat="server" AssociatedControlID="CreditCardNumber" Text="Credit Card Number" />
    <br />
     <asp:TextBox ID="CreditCardNumber" runat="server" CssClass="TextBox" MaxLength="16" Width="120"></asp:TextBox>
</div>
<div style="float: left; width: 200px;">
    <asp:Label ID="ExpirationLabel" runat="server" AssociatedControlID="ExpirationMonth" Text="Expiration Date"  />
    <br />
    <asp:DropDownList runat="server" ID="ExpirationMonth" Width="40">
        <asp:ListItem Text="01" Value="01" />
        <asp:ListItem Text="02" Value="02" />
    </asp:DropDownList>
    <asp:DropDownList runat="server" ID="ExpirationYear" Width="60">
        <asp:ListItem Text="2012" Value="2012" />
        <asp:ListItem Text="2013" Value="2013" />
    </asp:DropDownList>
</div>
<div style="float: left; width: 200px;">
    <asp:Label ID="CVVLabel" runat="server" AssociatedControlID="CVV" Text="CVV Code" />
    <br />
     <asp:TextBox ID="CVV" runat="server" CssClass="TextBox"   MaxLength="4" Width="50"></asp:TextBox>
</div>

需要了解如何在aspx页面中格式化控件

3 个答案: