0

コントロールの行を作成しようとしています。基本的には、検索をフィルタリングするためのものです。各行には 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が作成したコメントにあります。

4

1 に答える 1

1

<div style="clear:both;"></div>各行の後に追加します。

于 2012-07-20T09:03:42.557 に答える