リストの数字が正しく表示されない

後続のリストごとに開始属性を1桁ずつ増やして、同じリストをレンダリングします。

1. Betsy
1. Tacy
1. Tib
1. Naifi

  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi

  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi

  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi

  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi

  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi

  1. Betsy
  2. Tacy
  3. Tib
  4. Naifi

再現できました。これはCSSの問題で、順序付きリスト(<ol>)のデフォルトの間隔は、通常、小さい数字に対応するように設定されています。

同じリストがテーマごとに異なる表示になることに気づいたため、次のようなコンポーネントを作成しました。

ol {
  margin-left: 3em;
}

一方で、これはすべてのリストに適用され、項目が5桁以上の大きな数字でない場合、順序付きリストにはスペースが多すぎるように見えます…

提案:サイトでの順序付きリストの使用方法に合わせたコンポーネントを適用してください。長いリストの途中を抜粋することはまれであり、10,000項目以上のリストを投稿する人が文字数制限に引っかからないとは想像できません。:slight_smile:

リストが常に収まるようにスタイルを設定する方法があるかと思いましたが、順序付きリストの番号付けは疑似要素(::marker)として適用され、それに対してCSSの計算を行う方法がわかりません… :thinking:

「いいね!」 3