Question

我正在尝试使用浮动div构建表单，而不是使用表格的常规方法。我已经到达了提交按钮，并试图将其置于中心位置。通常情况下，作为块元素的DIV会自动消耗整行，并且在它不会之后会有换行符吗？但我的不是，我无法弄清楚为什么。我试着明确地将它的宽度设置为100％，但它仍然不会使用整个宽度。为了让我更加困惑，div的风格清晰：两者都有;我认为应该防止任何内容浮动在它旁边。我也尝试将以下文本放在自己的div中，但没有任何改变。为什么文本会在提交div旁边浮动？

<style type="text/css">
    #rlpContactForm
    {
        width:275px;
    }
    #rlpContactForm label
    {
        display:block;
        float:left;
        width:112px;
        text-align:right;
        font-weight:bold;
    }
    #rlpContactForm input
    {
        float:left;
        margin:0 0 5px 5px;
    }
    #rlpContactForm input[type="text"]
    {
        border: 1px solid #999999;
    }
    #rlpContactForm input[type="text"]
    {
        width: 146px;   /*175 available - total width of label (including margins/borders/10pxwiggle room)*/
        padding: 1px 0px 1px 0px;   /* Otherwise IE adds 1px right and left padding automatically */
    }
    #rlpContactForm input[type="text"].age
    {
        width: 44px;    /* Sized for 3 boxes to fit 1 line */
        margin: 0 0 5px 5px;
        text-align:center;
    }

    #rlpContactForm .submit
    {
        float:none;
        clear:both;
        width:100%;
        text-align:center;
    }
</style>

...

<div id="rlpContactForm">
        <label>First Name:</label>
        <asp:TextBox ID="txtFName" runat="server" />
        <label>Last Name:</label>
        <asp:TextBox ID="txtLName" runat="server" />
        <label>E-mail:</label>
        <asp:TextBox ID="txtEmail" runat="server" />
        <label>Phone:</label>
        <asp:TextBox ID="txtPhone" runat="server" />
        <label>Children's Ages:</label>
        <asp:TextBox ID="txtAge1" runat="server" CssClass="age"/>
        <asp:TextBox ID="txtAge2" runat="server" CssClass="age"/>
        <asp:TextBox ID="txtAge3" runat="server" CssClass="age"/>

        <div class="submit"><asp:Button ID="btnSubmit" runat="server" Text="Submit"/></div>
        Thank you for your interest. A team member will contact you shortly.
    </div>

IE和Firefox显示如

|Submit|Thank you for your interest. A
        team member will contact you
shortly.

Answer 1

如果您不希望发生这种情况，请将文本浮动：

<div class="float:left">Thank you for your interest. A team member will contact you shortly.</div>

修改

我现在明白你的意思了，即使上面的答案适合你，这是一个更好的方法：

.submit { float:none; clear:both; width:100%; text-align:center; overflow:hidden; }

因为.submit div内的输入元素有一个浮动，所以.submit div失去了它的高度。为防止这种情况，请添加overflow:hidden。

我从来不知道究竟发生了什么以及正确的术语是什么，所以你必须要仔细研究。我只知道它是如何工作的：P

Answer 2

停止。等待。不，答案真的比这一切容易得多。

问题是你的.submit容器清除了，是的，但它没有/包含你放在里面的按钮。那个按钮仍然浮动。

尝试这样的事情：

#rlpContactForm .submit input {
    float:none;
}

为什么内容浮动在DIV旁边？

2 个答案: