调整ASP。Net标签和文本框使用CSS?

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.

我需要使用CSS来排列我的ASP。净标签和文本框。我已经尝试过使用具有以下样式的DIVs，但是事情仍然没有进展。

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

还需要添加什么CSS语法来确保我的所有标签都在一起，它们对应的文本框就在旁边?

Thanks!

谢谢!

4 个解决方案

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

#2

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>

#3

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

#4

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

#1