1

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

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

在此处输入图像描述

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

下面是 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>

4

3 回答 3

3

我可以看到使用<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>

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

于 2012-09-06T16:35:58.300 回答
1

如果你真的不想使用 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 时，先将标签设置为宽度，然后是空格&nbsp;，然后是另一个设置宽度的标签，下一行是设置宽度的文本框，然后是空格&nbsp;

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

另外我有一段时间没有在 asp.net 中使用 Width 属性，我通常使用 css ，它可能在您的代码中设置不正确我认为它可能Width="120px"是Width="120"

于 2012-09-06T16:35:57.167 回答
1

您可以使用 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>

于 2012-09-06T16:49:05.407 回答