Aligning ASP.Net Labels and TextBoxes using CSS?

Question

I need to use CSS to line up my ASP.NET labels and textboxes. I've tried using DIVs with styling per below, but things still aren't 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 must be added to ensure all my labels are lined up under each other, and their corresponding textbox is beside it?

Thanks!

So, This is homework for us but you need to hire us!

sikender
– sikender

2011-12-16 07:02:44 +00:00
Commented Dec 16, 2011 at 7:02 — sikender
– sikender, Commented Dec 16, 2011 at 7:02

Chamika Sandamal · Accepted Answer · 2011-12-16 07:03:29Z

6

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

answered Dec 16, 2011 at 7:03

Chamika Sandamal

24.4k5 gold badges68 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bAN · Accepted Answer · 2011-12-16 07:07:40Z

0

Maybe you can use a <table> to display your labels

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

answered Dec 16, 2011 at 7:07

bAN

13.9k17 gold badges63 silver badges97 bronze badges

1 Comment

Chamika Sandamal Over a year ago

using a table is not a good idea. yes you can use table, but this is not a tabular representation. so if you use table for styling the html it will give a bad meaning about the html.

Maysam · Accepted Answer · 2011-12-16 07:12:27Z

0

You can do this also:

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

answered Dec 16, 2011 at 7:12

Maysam

7,38313 gold badges75 silver badges116 bronze badges

Comments

Bibhu · Accepted Answer · 2011-12-16 07:13:47Z

0

You may write in this manner :

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

answered Dec 16, 2011 at 7:13

Bibhu

4,1014 gold badges35 silver badges64 bronze badges

Collectives™ on Stack Overflow

Aligning ASP.Net Labels and TextBoxes using CSS?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related