ホームへ

CSSでliを縦並びにする方法

「横並びになっているliを縦並びにしたい!」

「パソコンでは縦並びに、スマホでは縦並びにしたい!」

横並びになっているliを縦並びにする方法を解説します。

liは基本的に縦並び

ul liは意図的にCSSを指定しない限り、下記のように縦並びになります。

  • リスト1
  • リスト2
  • リスト3
<ul>
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

横並びになっているliを縦並びに戻す方法についてみていきましょう。

横並びを解除して縦並びにする

liを横並びにしているCSSを解除すれば、縦並びになります。

横並びにしているCSSがわからない場合の確認方法も紹介します。

かかっているCSSの確認方法

かかっているCSSを確認するにはDevToolsを使います。

Chromeで確認したい箇所で右クリック>検証を押すと起動します。

具体的な使い方は下記記事をご確認ください。

display:flexの場合

ulを確認し「display:flex」が指定されている場合の方法です。

これを解除するにはulに「display:block」を指定しましょう。

ul{
    display: block;
}

float:leftの場合

liを確認し「float:left」が指定されている場合の方法です。

これを解除するにはliに「float: none」を指定しましょう。

li{
    float: none;
}

display:inline-blockの場合

liを確認し「display:inline-block」が指定されている場合の方法です。

これを解除するにはliに「display: list-item」を指定しましょう。

li{
    display: list-item;
}

【まとめ】liを縦並びにする方法

liは基本的に縦並びであるため横並びにしているCSSを特定して解除する。

ulを確認し「display:flex」が指定されている場合「display:block」を指定。

liを確認し「float:left」が指定されている場合「float: none」を指定。

liを確認し「display:inline-block」が指定されている場合「display: list-item」を指定。

以上、CSSでliを縦並びにする方法でした。

マンガで読める関連記事