CSS div内联

我目前正在建立一个联系表单。代码：CSS div内联

<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（见我重视的形象。） contact form 请给我一个解决方案

来源

2012-12-10 Nitish

摆脱你float: left;

Demo

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

来源

2012-12-10 08:03:11

Thanks..its。现在，div并没有搞砸，但我想要在同一行中的名称和文本字段。如果我删除了'float：left'，那么文本字段会在名称后出现 – Nitish

@Nitish等待，我会为你做这个 –

@Nitish检查一下http://jsfiddle.net/BV3vf/1/ –

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

像部分地解决了这个

.contact_fields 
{ 
overflow:hidden;  
}

Demo

来源

2012-12-10 08:16:52

回答

相关问题