HTML/CSS 2つの一見等しい要素、位置が異なる

Question

私はHTMLでフォームを作成しようとしています。私が説明できる最良の方法は私のコードを示すことです。

HTML：Google Chromeで

form div { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 100px; 
 
} 
 
.inputContainer { 
 
    display: inline-block; 
 
} 
 
.inputContainer input { 
 
    display: block; 
 
    width: 14em; 
 
} 
 
.inputTitle { 
 
    display: inline-block; 
 
    position: relative; 
 
    bottom: 1.5em; 
 
}

<form> 
 
    <div> 
 
    <div class="inputTitle">[Name]</div> 
 
    <div class="inputContainer"> 
 
     <input type="text" name="lastName"></input><sup>last</sup> 
 
    </div> 
 
    <div class="inputContainer"> 
 
     <input type="text" name="firstName"></input><sup>first</sup> 
 
    </div> 
 
    <div class="inputContainer"> 
 
     <input type="text" name="middleName"></input><sup>middle</sup> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div>[SS#]</div> 
 
    <div class="inputContainer"> 
 
     <input type="text" name="socialFirst"></input> 
 
    </div> 
 
    - 
 
    <div class="inputContainer"> 
 
     <input type="text" name="socialMiddle"></input> 
 
    </div> 
 
    - 
 
    <div class="inputContainer"> 
 
     <input type="text" name="socialLast"></input> 
 
    </div> 
 
    </div> 
 

 
</form>

：要素左上の角があるため、同じy座標上で起動しない理由 誰かが説明してくださいすることができます高さプロパティは、ページの下部に向かって増加し、上部には増加しません。

Answer 1

inline-block要素のデフォルトvertical alignがbaselineです。 vertical-alignをtopに変更します。

form div { 
    position: relative; 
    display: inline-block; 
    height: 100px; 
    vertical-align: top; 
} 

Answer 2

インライン要素のデフォルトの垂直配置はベースラインであるため、表示されています。トップにそれを変更してみてください：

form > div { vertical-align:top} 

Answer 3

脇vertical-alignを使用してから、あなたはflexboxを使用することができます。デフォルトでは、アイテムはあなたのために整列しますが、align-itemsを使用すると、それらを異なる位置に揃えることができます。

form { 
 
    display: flex; 
 
} 
 
@media (max-width: 1200px) { 
 
    form { 
 
    flex-direction: column; 
 
    } 
 
} 
 
form div { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 100px; 
 
} 
 
.inputContainer { 
 
    display: inline-block; 
 
} 
 
.inputContainer input { 
 
    display: block; 
 
    width: 14em; 
 
} 
 
.inputTitle { 
 
    display: inline-block; 
 
    position: relative; 
 
    bottom: 1.5em; 
 
}

<form> 
 
    <div> 
 
    <div class="inputTitle">[Name]</div> 
 
    <div class="inputContainer"> 
 
     <input type="text" name="lastName"></input><sup>last</sup> 
 
    </div> 
 
    <div class="inputContainer"> 
 
     <input type="text" name="firstName"></input><sup>first</sup> 
 
    </div> 
 
    <div class="inputContainer"> 
 
     <input type="text" name="middleName"></input><sup>middle</sup> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div>[SS#]</div> 
 
    <div class="inputContainer"> 
 
     <input type="text" name="socialFirst"></input> 
 
    </div> 
 
    - 
 
    <div class="inputContainer"> 
 
     <input type="text" name="socialMiddle"></input> 
 
    </div> 
 
    - 
 
    <div class="inputContainer"> 
 
     <input type="text" name="socialLast"></input> 
 
    </div> 
 
    </div> 
 

 
</form>