CSS與表單字段的水平對齊

Question

我已經研究了關於該主題的所有可能答案，對於我的一生，無法完成。

在此頁面上http://dev.rpgplan.com/contact-us/我正在嘗試排列此圖像的前3個字段http://note.io/13eOJi7

但我得到的只是字段未對齊。

Answer 1

也許這會有所幫助，

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>

Answer 2

在頁面中，您使用了<br></br>標記在3個引起lineBreak的輸入字段之間，所以這是我要更改的內容，並認為可以解決您的問題

<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; 下邊距：20px； 屬性，但第3個字段的margin-top：3px； 底邊距：10px; ！
因此，像其他兩個字段一樣修復第三字段的屬性，就可以了。