c# - 将 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；- 在列中(每一行):一个标签和一个文本框- 每个标签的宽度应始终为 150 像素，以便在同一位置放置文本框

它接缝的列 float 得很好(我可以看到三个不同的列)但标签只是适应它们的内容。

我做错了什么？

谢谢

Answer 1

你不能在内联元素上设置宽度，所以使用这个

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

虽然你有一个问题，因为输入不会自动调整它们的宽度，所以你还需要

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

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