イイダリョウのブログ。list-styleが表示されない!原因はdisplayにあった!6年前の知恵袋に救われた話2017-10-12list-styleが表示されない!原因はdisplayにあった!6年前の知恵袋に救われた話CSSある日、リストに数字を表示したい時があった。OKOK、そんな時はリストをul要素ではなくol要素にすればいいのよね。打ち替えてみたが、あれ?表示ない。試行錯誤の結果、6年前のYahoo知恵袋のとある回答によってようやく表示することができた!という話。目次:list-stayleが表示されない!list-staye表示された!!display:list-itemを別の要素に当ててみる子要素にdisplay:inline-blockを適用してみるまとめ※参考:CSSの基本についてはこちら【CSSの基本】書ける前に読む!HTML、CSS、JSの書式-3list-stayleが表示されない!表示されなかったリストはこんな感じです。li要素の中に写真とテキストがありそれを横に並べている。CodePen.ちなみにCSSにはブラウザの初期スタイルを解除する「リセットCSS」を設定している。CSSを見ていただけると、CDNがリンクされている。https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.cssこのリセットCSSはlist-styleを無効化する。decimal;」を設定したのだが、表示されない。以前、この記事やこの記事にあるように、ol要素に「overflow:hidden」が設定されていてその枠外にlist-styleがあるために表示されなかったことがあった。そのため、marginやらpaddingやらoverflowやらtext-indentやらを色々いじってみた。あらゆる所に!importantを当てまくった。それでも表示されない。したらul要素にしたら表示されるかもしれない。