0

現在、お問い合わせフォームを作成中です。コード：

<div id="contact_form">
            <form action="contact.php" method="post">

                <div class="contact_fields">
                    <div class="cf1">NAME</div>
                    <div class="cf2">
                        <input type="text" name="name" />
                     </div>
                </div>

                <div class="contact_fields">     
                    <div class="cf1">EMAIL</div>
                    <div class="cf2">
                        <input type="text" name="name" />
                     </div>
                </div> 

                 <div class="contact_fields">     
                    <div class="cf1">PHONE</div>
                    <div class="cf2">
                        <input type="text" name="name" />
                     </div>
                </div> 

            </form>
        </div>

そしてCSS：

#contact_form
{
    padding:12px 20px 10px 20px;
    background:#f5f5f5;
    overflow:hidden;
    width:700px;
}

.contact_fields
{
    width:580px;
    margin-top:20px;    
}

.cf1
{
    width:80px;
    float:left;
    color:#333333;
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size:14px;
}
.cf2
{
    width:280px;
    float:left;

}
.cf2 input
{
    height:25px;
    width:280px;
}

しかし、contact_fieldsdivは、ブレークのあるdivではなく、インラインで表示されます（添付の画像を参照してお問い合わせフォームください）。解決策を教えてください

4

2 に答える 2

1

あなたのfloat: left;

デモ

.cf2 {
    width:280px;
    float:left; <----Here
}
于 2012-12-10T08:03:11.740 に答える
1

次に、親を定義します.contact_fields overflow:hidden;

このように

.contact_fields
{
overflow:hidden;    
}

デモ

于 2012-12-10T08:16:52.640 に答える