Align ASP.Net labels and text fields with CSS?

Question

I need to use CSS to align ASP.NET labels and text fields. I tried using DIVs with the style below, but still not lining up.

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

What additional CSS syntax needs to be added so that all my shortcuts line up under each other, and their corresponding text box next to it?

Thanks!

Answer 1

use something like this

 <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

Perhaps you can use <table> to display your shortcuts

 <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

You can also do this:

 .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

You can write as follows:

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