list-style が表示されないときの対処法メモ。分かってしまえばカンタンでした。
【CSS】list-style が表示されないときの対処法
めっちゃハマって時間を溶かしたのでメモっておく。
当初フツーに li に list-styleを当てようとしたんですが、効かず。
リセットcss は使ってるけど、いやいや上書きだから効くはずだしなーなんて考えてとりあえず!importantしてみても効かず…。
んんー???
隠れてしまっているのかも、と overflow:hidden や margin ・ padding なんかも調整したが表示されず…。
で、色々調べてやっと解決方法見つけました。
引用させていただきます↓
このプロパティはリスト項目、すなわち
出典引用:https://developer.mozilla.org/ja/docs/Web/CSS/list-styleの要素に適用されます。
display
: list-item;
要は、『 li 要素が display: list-item ( li の初期値)じゃないと適用されませんよ』ってことです。
list-style が効かなかった件の li は、子要素の横並びのために display: flex を当てていて、なんと原因は display でした、ってオチです。
違うクラスを作って display : list-item; を指定してあげると強制的に list-style は適用できるので、シチュエーションにあった方法をいろいろ試してみてください。