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

Posted 2023-03-06

技术标签:

【中文标题】需要了解如何在aspx页面中格式化控件【英文标题】：Need to understand how to format controls in aspx page 【发布时间】：2012-08-31 12:46:55 【问题描述】：

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

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

【问题讨论】：

【参考方案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>

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

【讨论】：

为什么投反对票？不喜欢桌子？我喜欢将它们用于像这样只有 2 行的简单场景。它们工作得很好。感谢您的意见。我没有投反对票。这里的团队不希望我使用表格概念，但我会将其保留为最后一个选项。感谢您的帮助。我刚试过上面的。如何使左对齐或我希望第一列从 0px 本身开始？ @NewCoder：在要对齐内容的列中执行此操作<tr align="left"> 或<td align="left">。 align 属性的可能值是：left、center 或 right。你也可以这样做：<table width="100%" align="left">。希望你能明白。如果您有任何疑问，请告诉我... 我面临一个问题，我认为它与RequiredFieldValidators有关。我为每个文本框都有这些验证器，我猜这些是添加一行显示，当页面加载时显示许多空白行。你知道如何使用这些RequiredFieldValidators。我尝试了 display=dynamic 但没有多大成功。【参考方案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 时，设置宽度然后空格 &nbsp; 然后另一个设置宽度的标签，下一行是设置宽度然后空格 &nbsp; 的文本框

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

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

【讨论】：

感谢您的意见。如果我要使用样式表，我该如何继续考虑我正在寻找的显示？感谢您的帮助。这在答案中无法真正解释，谷歌 css 定位，你可以看到如何相对于父母和周围元素定位东西的例子——就像经过一点练习后你可以看看的任何东西以一种形式，一开始就立即了解 css，这需要一点练习我可以为您快速编写它 - 但如果您自己编写它以获得帮助时遇到问题，SO 真的更适合您【参考方案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>

【讨论】：

：感谢您的意见。如果我要使用 div 的设置，我该如何进行。请分享您的意见。

以上是关于需要了解如何在aspx页面中格式化控件的主要内容，如果未能解决你的问题，请参考以下文章

ASP.NET后台怎么获取.aspx页面的Checkbox的是不是选中状态？

WPF 工具包，如何在 C# 中为日期选择器控件应用日期格式？

ASP.NET中后台怎么获取 aspx页面所有选中的checkBox控件的值

MOSS Web 部件或 .aspx 页面/控件

.net中如何实现对第三方控件SChedulerControl控件的绑定以及使用说明?

原生aspx页面如何引用公共js和css