0

我正在尝试使用浮动 div 构建表单，而不是使用表格的正常方法。我已经到达提交按钮并试图将其居中。通常，作为块元素的 DIV 会自动用完一整行并在它之后有一个换行符，不是吗？但我的没有，我不知道为什么。我尝试将它的宽度明确设置为 100%，但它仍然不会使用全宽。更让我困惑的是，div 的样式是 clear:both; 我认为应该防止任何内容漂浮在它旁边。我还尝试将其以下文本放在自己的 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.
4

2 回答 2

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

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

我从来不知道到底发生了什么以及正确的条款是什么，所以你必须查一下。我只知道它是这样工作的：P

于 2013-02-21T21:40:57.180 回答
1

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

问题是您的 .submit 容器已清除，是的，但它不/包含/您放入其中的按钮。该按钮仍然浮动。

尝试这样的事情：

#rlpContactForm .submit input {
    float:none;
}
于 2013-02-21T22:36:38.407 回答