asp.net - aspx ページでコントロールをフォーマットする方法を理解する必要がある

Question

ここで基本的な質問をして申し訳ありませんが、コントロールの書式設定に正しいアプローチを適用できませんでした。

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

score 3 · Accepted Answer

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

コントロールをテーブル要素内に配置するだけで完全に整列し、必要に応じて左/中央/右に配置することもできます。

score 1 · Accepted Answer

本当に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"。Width="120"

score 1 · Accepted Answer

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>

asp.net - aspx ページでコントロールをフォーマットする方法を理解する必要がある

3 に答える 3

Related

Reference