CSS 与表单域水平对齐

Question

我已经查看了关于这个主题的所有可能答案，但我终其一生都无法完成。

在此页上 http://dev.rpgplan.com/contact-us/我正在尝试像这张图片一样排列前 3 个字段 http://note.io/13eOJi7

但我得到的只是未对齐的字段。

Answer 1

在您使用的页面中 <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 个字段有 ma​​rgin-top: 6px; 和 ma​​rgin-bottom: 20px; 属性，但第 3 个字段有 ma​​rgin-top: 3px; 和 ma​​rgin-bottom: 10px;!
所以像其他两个字段一样修复第 3 个字段的属性，就可以了。