CSSを使用してASP.Netラベルとテキストボックスを整列するには？

Question

私は、ASP.NETラベルとテキストボックスを整列するためにCSSを使用する必要があります。私は以下のスタイリングでDIVを使ってみましたが、物事はまだ整列していません。

<div style="float:left; display:block;"> 
<asp:Label runat="server" id="lblPartNumber" CssClass="label">Part Number:</asp:Label><br /> 
<asp:Label runat="server" ID="lblSubID" CssClass="label">Sub ID:</asp:Label><br /> 
<asp:Label runat="server" ID="lblPartDesc" CssClass="label">Part Description:</asp:Label><br /> 
<asp:Label runat="server" ID="lblForModels" CssClass="label">For Models:</asp:Label><br /> 
<asp:Label runat="server" ID="lblColor" CssClass="label">Color:</asp:Label><br /> 
<asp:Label runat="server" ID="lblPrice" CssClass="label">Price:</asp:Label><br /> 
<asp:Label runat="server" ID="lblMisc" CssClass="label">Misc:</asp:Label><br /> 
<asp:Label runat="server" id="lblLiveImage" CssClass="label">Live Image:</asp:Label><br /> 
<asp:Label runat="server" ID="lblOEMNumber" CssClass="label">OEM Number:</asp:Label><br /> 
<asp:Label runat="server" ID="lblBEDiscount" CssClass="label">BE Discount:</asp:Label><br /> 
<asp:Label runat="server" ID="lblSalePrice" CssClass="label">Sale Price:</asp:Label><br /> 
<asp:Button runat="server" ID="btnAddPart" Text="Add Part" /> 
</div> 
<div style="display:block; padding-left:20px;"> 
<asp:TextBox runat="server" ID="txtPartNumber" CssClass="textbox"></asp:TextBox><br /> 
<asp:TextBox runat="server" ID="txtSubID" CssClass="textbox"></asp:TextBox><br /> 
<asp:TextBox runat="server" ID="txtPartDesc" CssClass="textbox"></asp:TextBox><br /> 
<asp:TextBox runat="server" ID="txtForModels" CssClass="textbox"></asp:TextBox><br /> 
<asp:TextBox runat="server" ID="txtColor" CssClass="textbox"></asp:TextBox><br /> 
<asp:TextBox runat="server" ID="txtPrice" CssClass="textbox"></asp:TextBox><br /> 
<asp:TextBox runat="server" ID="txtMisc" CssClass="textbox"></asp:TextBox><br /> 
<asp:TextBox runat="server" ID="txtLiveImage" CssClass="textbox"></asp:TextBox><br /> 
<asp:TextBox runat="server" ID="txtOEMNumber" CssClass="textbox"></asp:TextBox><br /> 
<asp:TextBox runat="server" ID="txtBEDiscount" CssClass="textbox"></asp:TextBox><br /> 
<asp:TextBox runat="server" ID="txtSalePrice" CssClass="textbox"></asp:TextBox><br /> 
</div>  

何の追加CSSの構文は、すべて私のラベルがお互いの下に並んで、そしてそれに対応するテキストボックスはその横にあるされていることを確認するために追加する必要がありますか？

ありがとうございます！

Answer 1

使用このような何か、

<ul> 
    <li> 
    <asp:Label runat="server" id="lblPartNumber" CssClass="label">Part Number:</asp:Label> 
    <asp:TextBox runat="server" ID="txtPartNumber" CssClass="textbox"></asp:TextBox> 
    </li> 
    ..... 
</ul> 

CSS、

.label,.textbox{ 
    display : inline; 
} 

Answer 2

たぶん、あなたはまた、これを行うことができ、あなたのラベル

<table> 
<tr> 
    <td><asp:Label runat="server" id="lblPartNumber" CssClass="label">Part Number:</asp:Label</td> 
</tr> 
<tr> 
    <td><asp:Label runat="server" ID="lblSubID" CssClass="label">Sub ID:</asp:Label></td> 
</tr> 
</table> 

Answer 3

を表示するために<table>を使用することができます。

を

.label, .textbox{ 
    width:50px;/*or something you like, it will assign a fixed width to all them*/ 
    text-align:left; 
    float:left; 
    display:block; 
} 

Answer 4

あなたは、このように書くことがあります。

<div style="float:left; display:block;"> 
<asp:Label runat="server" id="lblPartNumber" CssClass="label">Part Number:</asp:Label><br /> 
<asp:TextBox runat="server" ID="txtPartNumber" CssClass="textbox"></asp:TextBox><br /> 
</div> 
.......