我需要使用CSS来排列我的ASP.NET标签和文本框。我已经尝试过将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语法才能确保我的所有标签彼此排列,并且相应的文本框位于其旁边?
谢谢!
答案 0 :(得分:6)
使用类似的东西,
<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;
}
答案 1 :(得分:0)
也许您可以使用<table>
来显示标签
<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>
答案 2 :(得分:0)
您也可以这样做:
.label, .textbox{
width:50px;/*or something you like, it will assign a fixed width to all them*/
text-align:left;
float:left;
display:block;
}
答案 3 :(得分:0)
您可以这样写:
<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>
.......