CSS与表单域的水平对齐

Question

我已经看过关于这个主题和我的生活的每一个可能的答案，无法完成。

在此页面http://dev.rpgplan.com/contact-us/我试图排队这样的形象http://note.io/13eOJi7

前3场，但所有我得到的是错位领域。

Answer 1

在您使用导致换行符所以这里<br></br>标签之间3输入字段的页面是我改变，并认为解决您的问题

<div class="wpcf7" id="wpcf7-f352-p353-o1"><form action="/contact-us/#wpcf7-f352-p353-o1" method="post" class="wpcf7-form" novalidate="novalidate"> 

<div style="display: none;"> 
... 
</div> 

<div id="inner-contact"> 

<span class="wpcf7-form-control-wrap first-name"> 
    <input name="first-name" ... " type="text"> 
</span> 
**[Omit <br></br>]** 

<span class="wpcf7-form-control-wrap last-name"> 
    <input name="last-name" ... type="text"> 
</span> 
**[Omit <br></br>]** 

<span class="wpcf7-form-control-wrap email"> 
    <input name="email" ... type="email"> 
</span> 
</div> 
... 
</div> 
</form> 
</div> 

另外我看到你的第2个字段有margin-top：6px;和margin-bottom：20px;财产，但第三场有margin-top：3px;和margin-bottom：10px;！
所以修正第三场的属性就像两个其他领域，它会没事的。

Answer 2

也许这将帮助，

jsFiddle

.small{ 
    border:1px solid black; 
    float:left; 
    height:20px; 
    width:50px; 
    margin-right:20px; 
} 
.big 
{ 
    border:1px solid black; 
    float:left; 
    clear:left; 
    height:200px; 
    width:194px; 
    margin-top:20px; 
} 

<div> 
    <div class="small"></div> 
    <div class="small"></div> 
    <div class="small"></div> 
    <div class="big"></div> 
</div>