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

對不起，在這裏提出一些基本的東西，但我還沒有能夠在格式化控件中應用正確的方法。需要了解如何在aspx頁面中格式化控件

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

來源

2012-09-06 NewCoder

我可以看到這樣使用<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-06 16:35:58

爲什麼downvote？不喜歡桌子？我喜歡將它們用於這種僅有2行的簡單場景。他們完美地工作。 –

感謝您的輸入。我沒有倒下。這裏的團隊不希望我使用表格的概念，但我會保持這一點作爲最後的選擇。感謝你的幫助。 – NewCoder

我剛纔嘗試了以上。我如何使左對齊，或者我想第一列從0px開始？ – NewCoder

如果你真的不想使用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標籤放的時候，下一行是集寬度，則空間文本框中 

我不會reccommend使用表格造型形式，我會堅持使用表格來顯示數據表格

此外，我在一段時間內沒有在asp.net中使用寬度屬性，我通常使用CSS，它可能沒有在您的代碼中正確設置I認爲它可能是Width="120px"而不是Width="120"

來源

2012-09-06 16:35:57

感謝您的輸入。如果我要使用樣式表，我該如何繼續考慮我正在尋找的顯示器？感謝你的幫助。 – NewCoder

這不能真正解釋答案，谷歌的CSS定位，你可以看到如何定位相對於父母和元素周圍的東西的例子 - 像一些小練習後的東西，你可以看看一個表單知道CSS立即開始需要一點練習 –

我可以爲你真正快速地爲你編寫它 - 但是如果你遇到問題，自己寫，得到幫助，那麼SO更是如此 –

您可以使用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-06 16:49:05 Steve

：感謝您的輸入。如果我要使用div的設置，我該如何繼續。請分享您的意見。 – NewCoder

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

回答

相關問題