将css样式应用于Asp.net标签（c＃）。 我究竟做错了什么？

Question

我有这样的代码：

<div id = "part1">
    <asp:Label id = "label1" CssClass="labels" runat="server" Text="label1" />
    <asp:TextBox id = "textBox1"  runat="server" Text="test1" />
    <br />
    <asp:Label id = "label2" CssClass="labels" runat="server" Text="label2" />
    <asp:TextBox id = "textBox2" " runat="server" Text="test2" />
</div>

<div id = "part2">
    <asp:Label id = "label3" CssClass="labels" runat="server" Text="label3" />
    <asp:TextBox id = "textBox3"  runat="server" Text="test3" />
    <br />
    <asp:Label id = "label4" CssClass="labels" runat="server" Text="label4" />
    <asp:TextBox id = "textBox4"  runat="server" Text="test4" />
</div>

<div id = "part3">
    <asp:Label id = "label5" CssClass="labels" runat="server" Text="label5" />
    <asp:TextBox id = "textBox5"  runat="server" Text="test5" />
   <br />
    <asp:Label id = "label6" CssClass="labels" runat="server" Text="label6" />
    <asp:TextBox id = "textBox6"  runat="server" Text="test6" />
</div>

与以下CSS关联：

.part1
{
 float:left;
 width: 300px;
}
.part2
{
 float:left;
 width: 300px;
}
.part3
{
 float:left;
 width: 300px;
}

.labels
{
 width: 150px;
}

我的目标是： - 有3列宽= 300px; - 在列中（对于每一行）：一个标签和一个文本框 - 每个标签应始终宽度= 150px，以使文本框位于相同位置

它将列漂浮得很好（我可以看到三个不同的列），但标签只是适应它们的内容。

我做错了什么？

谢谢

Answer 1

您无法在内联元素上设置宽度，因此请使用此元素

.labels
{
  width: 150px;
  display:inline-block;
}

虽然您遇到问题，因为输入不会自动调整宽度，因此您也需要

.part1 input, .part2 input, .part3 input {
  width: 150px;
  display:inline-block;
}

如果您在输入或标签上使用填充/边距/边框，则可能还需要调整宽度设置