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

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

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

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)
  • (・∀・) 参考になった (7)
  • (`・ω・´) 役に立った (7)