html - 2 div の垂直方向の配置の問題

Question

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    outline: 1px solid red;
}

<div></div>
<div>
    <ul>
        <li>1</li>
    </ul>
</div>

行の 2 つの div これらの div の 1 つに順序付けられていないリストを追加し、これらの 2 つの div の垂直方向の配置が壊れている

どうすればこれを修正できますか?

Answer 1

使用する必要がありますvertical-align: top;

デモ

div {
    display: inline-block;
    width: 100px;
    height: 100px;
    outline: 1px solid red;
    vertical-align: top; /* <----- Here */
}

ここで使用するfloat: left;代わりに使用することをお勧めしますinline-block;

フロートのデモ(フロートをクリアすることを忘れないでください)

Answer 2

試す

div{
 vertical-align: middle;
 text-align: center;
}