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

如果您在輸入或標簽上使用填充/邊距/邊框，則可能還需要調整寬度設置