CSS div 即将内联

Question

我目前正在构建联系表。代码:

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

但是 div contact_fields 是内联的，而不是带中断的 div(见我附上的图片。)请给我一个解决方案

Answer 1

去掉你的float: left;

Demo

.cf2 {
    width:280px;
    float:left; <----Here
}