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

但是 divcontact_fields是内联的，而不是带中断的 div（请参阅我附上的图片。）请给我一个解决方案

Answer 1

摆脱你的float: left;

演示

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

Answer 2

现在定义你的父母.contact_fields overflow:hidden;

像这样

.contact_fields
{
overflow:hidden;    
}

演示