【CSS】list-style が効かない・表示されないときの対処法と原因

list-style が表示されないときの対処法メモ。分かってしまえばカンタンでした。

【CSS】list-style が表示されないときの対処法

めっちゃハマって時間を溶かしたのでメモっておく。

当初フツーに li に list-styleを当てようとしたんですが、効かず。

リセットcss は使ってるけど、いやいや上書きだから効くはずだしなーなんて考えてとりあえず!importantしてみても効かず…。

んんー???

隠れてしまっているのかも、と overflow:hidden や margin ・ padding なんかも調整したが表示されず…。

で、色々調べてやっと解決方法見つけました。

引用させていただきます↓

このプロパティはリスト項目、すなわち display: list-item; の要素に適用されます。

出典引用:https://developer.mozilla.org/ja/docs/Web/CSS/list-style

要は、『 li 要素が display: list-item ( li の初期値)じゃないと適用されませんよ』ってことです。

list-style が効かなかった件の li は、子要素の横並びのために display: flex を当てていて、なんと原因は display でした、ってオチです。

違うクラスを作って display : list-item; を指定してあげると強制的に list-style は適用できるので、シチュエーションにあった方法をいろいろ試してみてください。

CSS設計を学びたいならダントツで分かりやすくてオススメ▼