Question

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

在此页面上http://dev.rpgplan.com/contact-us/我正在尝试排列前三个字段，例如此图片http://note.io/13eOJi7

但我得到的只是错位。

Answer 1

也许这会有所帮助，

.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

在页面中，您在导致lineBreak的3个输入字段之间使用了<br></br>标记，所以这里是我改变并认为解决问题的方法

<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; 属性，但第3个字段有 margin-top： 3px; 和 margin-bottom：10px; ！
所以像其他两个字段一样修复第三个字段的属性，这样就可以了。

CSS与表单字段的水平对齐

2 个答案: