0

テーブルを使用する通常のアプローチとは対照的に、フローティング div を使用してフォームを作成しようとしています。送信ボタンに到達し、中央に配置しようとしています。通常、ブロック要素である DIV は、自動的に行全体を使い果たし、その後に改行がありますね。しかし、私のものはそうではなく、その理由がわかりません。幅を明示的に 100% に設定しようとしましたが、それでも全幅を使用しません。さらに混乱させるために、div は clear:both; でスタイル設定されています。これにより、コンテンツが横に浮かないようにする必要があると思いました。また、次のテキストを独自の div に入れてみましたが、何も変わりませんでした。submit 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;
    }

div内の入力要素に.submitfloatが残っているため、.submitdivはその高さを失います。これを防ぐには、を追加しoverflow:hiddenます。

私は正確に何が起こるのか、そして正しい用語が何であるのかを知らなかったので、あなたはそれを調べなければならないでしょう。私はこれがどのように機能するかを知っています：P

于 2013-02-21T21:40:57.180 に答える
1

止まる。待って。いいえ、答えはこれらすべてよりもはるかに簡単です。

問題は、あなたの .submit コンテナがクリアされることですが、中に入れたボタンが/含まれていません. そのボタンはまだ浮かんでいます。

次のようなことを試してください：

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