Div没有按预期工作

时间:2012-07-20 08:33:53

标签: asp.net html markup

我正在尝试创建控件行。基本上它是用于过滤搜索。每行有六个控件,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发表的评论中。

1 个答案:

答案 0 :(得分:1)

在每行之后添加<div style="clear:both;"></div>