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

**URL:** https://meta.discourse.org/t/list-numbers-rendered-incorrectly/222266
**Category:** Bug
**Created:** [2022 年 3 月 29 日午前 6:58 UTC](https://meta.discourse.org/t/list-numbers-rendered-incorrectly/222266 "2022-03-29T06:58:00Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![ljpp](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ljpp/32/96506_2.png) [@ljpp](https://meta.discourse.org/u/ljpp)
#### Post date: [2022 年 3 月 29 日午前 6:58 UTC](https://meta.discourse.org/t/list-numbers-rendered-incorrectly/222266/1 "2022-03-29T06:58:00Z")

</div>

1. 

ここで再現できましたか？

編集：はい、できました。最初の行には以下が含まれています。

```plaintext
12345678.
```

---

<div class="post-metadata">

### Author: ![maiki](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/maiki/32/233950_2.png) [@maiki](https://meta.discourse.org/u/maiki)
#### Post date: [2022 年 4 月 1 日午後 7:45 UTC](https://meta.discourse.org/t/list-numbers-rendered-incorrectly/222266/3 "2022-04-01T19:45:23Z")

</div>

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

```plaintext
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>`）のデフォルトの間隔は、通常、小さい数字に対応するように設定されています。

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

```css
ol {
  margin-left: 3em;
}

```

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

 ![Screenshot 2022-04-01 at 12-33-08 Test numbers - Sandbox Discourse Kit](https://global.discourse-cdn.com/meta/original/3X/b/0/b0af34d86dd589bae23c361d586f6e69c3f6a293.png)

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

リストが常に収まるようにスタイルを設定する方法があるかと思いましたが、順序付きリストの番号付けは疑似要素（[::marker](https://developer.mozilla.org/en-US/docs/Web/CSS/::marker)）として適用され、それに対してCSSの計算を行う方法がわかりません… 🤔

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2022 年 4 月 5 日午後 4:57 UTC](https://meta.discourse.org/t/list-numbers-rendered-incorrectly/222266/8 "2022-04-05T16:57:58Z")

</div>

こんにちは。

この問題でお困りとのこと、申し訳ございません。

詳しく調査した結果、この特定の問題は比較的まれなものであることがわかりましたので、お客様のサイトのCSSを直接変更するカスタムテーマコンポーネントが最善の解決策になると考えております。

---

<div class="post-metadata">

### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2022 年 4 月 5 日午後 4:58 UTC](https://meta.discourse.org/t/list-numbers-rendered-incorrectly/222266/9 "2022-04-05T16:58:09Z")

</div>


