コントロールの行を作成しようとしています。基本的には、検索をフィルタリングするためのものです。各行には 6 つのコントロールがあり、3 つのラベルと 3 つのドロップダウンリスト/テキスト ボックスがあります。行を作成する div があり、最初の行は素晴らしい結果になりましたが、残りは本当に奇妙です。
マークアップは以下
<div class="fullRow" style="margin-top:10px">
<asp:Label ID="FilterDepartmentLabel" AssociatedControlID="FilterDepartment" runat="server" Text="Department" CssClass="aThirdLabel"></asp:Label>
<asp:DropDownList ID="FilterDepartment" runat="server" CssClass="aThirdInput" />
<asp:Label ID="FilterCardStatusLabel" AssociatedControlID="FilterCardStatus" runat="server" Text="Status" CssClass="aThirdLabel"></asp:Label>
<asp:DropDownList ID="FilterCardStatus" runat="server" CssClass="aThirdInput" />
<asp:Label ID="FilterCardBehaviorLabel" AssociatedControlID="FilterCardBehavior" runat="server" Text="Behavior" CssClass="aThirdLabel"></asp:Label>
<asp:DropDownList ID="FilterCardBehavior" runat="server" CssClass="aThirdInput" />
</div>
<div class="fullRow" style="margin-top:10px">
<asp:Label ID="FilterCarPlateLabel" AssociatedControlID="FilterCarPlate" runat="server" Text="Car Plate" CssClass="aThirdLabel"></asp:Label>
<asp:TextBox ID="FilterCarPlate" runat="server" CssClass="aThirdInput"></asp:TextBox>
<asp:Label ID="FilterCardNoLabel" AssociatedControlID="FilterCardNo" runat="server" Text="Car No" CssClass="aThirdLabel"></asp:Label>
<asp:TextBox ID="FilterCardNo" runat="server" CssClass="aThirdInput"></asp:TextBox>
<asp:Label ID="FilterRuleSetCodeLabel" AssociatedControlID="FilterRuleSetCode" runat="server" Text="Rule Set" CssClass="aThirdLabel"></asp:Label>
<asp:DropDownList ID="FilterRuleSetCode" runat="server" CssClass="aThirdInput" />
</div>
<div class="fullRow" style="margin-top:10px">
<asp:Label ID="FilterDriverLastNameLabel" AssociatedControlID="FilterDriverLastName" runat="server" Text="Driver Lastname" CssClass="aThirdLabel"></asp:Label>
<asp:TextBox ID="FilterDriverLastName" runat="server" CssClass="aThirdInput"></asp:TextBox>
<asp:Label ID="FilterCardTypeLabel" AssociatedControlID="FilterCardType" runat="server" Text="Type" CssClass="aThirdLabel"></asp:Label>
<asp:DropDownList ID="FilterCardType" runat="server" CssClass="aThirdInput" />
</div>
そして、ここにcssがあります
.fullRow
{
width: 100%;
display:block;
}
.aThirdLabel
{
width: 15%;
float: left;
font-size:small;
height: 22px;
}
.aThirdInput
{
width: 15%;
float: left;
}
実際、VS2010 のデザイン ビューではこれが適切に表示されていても、ブラウザーにロードすると、めちゃくちゃになります。
ありがとう
編集:答えはhuMpty duMptyが作成したコメントにあります。