css - フォーム フィールドとの CSS 水平方向の配置

Question

私はこの問題について考えられるすべての答えを調べましたが、私の人生では、それを成し遂げることはできません.

このページhttp://dev.rpgplan.com/contact-us/で、この画像のように上位 3 つのフィールドを並べようとしていますhttp://note.io/13eOJi7

しかし、私が得ているのはフィールドの位置がずれているだけです。

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; プロパティですが、3 番目のフィールドにはmargin-top: 3px;があります。margin -bottom: 10px; !
そのため、3 番目のフィールドのプロパティを他の 2 つのフィールドと同様に修正すれば問題ありません。

Answer 2

多分これは役立つでしょう、

jsフィドル

.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>