css - 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>在导致 lineBreak 的 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; 和底边距：20px；属性，但第三个字段有margin-top: 3px; 和底边距：10px；！
所以像其他两个字段一样修复第三个字段的属性就可以了。