ど素人から毛を生やす。<延>

list-styleが表示されないときに確認すること

Web > css 2014年11月26日(最終更新:2年前)

このページは2014.11.26に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
ポケモンΩルビー、草タイプ縛り中の餅。です。

マグマ団も怖いけど、飛行タイプがこれまた怖い。

 

今回はコーディング中にちと蹴躓いた点をば。

僕はlist-styleでulを使うのがあまり好きではありません。
故に、普段はlist-style:noneにして、li:beforeで記号を入れているのですが、連番――つまりolを使いたいとなるとそうはいかなくなります。

仕方ないのでlist-style:decimalを設定したのですが、普段list-styleを指定したリストに慣れていなかったせいで躓いてしまいました。

list-styleで指定したハズの連番が表示されなかったのです。
要素を見る限りはきちんと表示されているハズなのに……

 

理由は親要素(ol)にありました。

ol:overflow:hiddenが設定されていたことが原因でした。

つまりはこういうことです。
h261126
list-styleで設定された内容は、liの前につきます。
このとき、liの内容は動かないまま、その前についてしまうため、親要素にoverflow:hiddenが設定されていると、親要素を飛び出て非表示になってしまうという簡単な話でした。

この解決法は、olにpadding-leftか、liにmargin-left
とにかくはみ出たlist-styleをol内に入れられればおkです。

基本的なことですが、普段使わないから把握しきれていない仕様って結構多いですね。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (`・ω・´) 役に立った (2)
  • (・∀・) 参考になった (4)