HTML有序列表ol，如何在数字和文本之间添加空格？

Question

我想在有序列表的编号和文本之间添加空格

例如：

 1.     Hello.
 2.     Test.

需要增加 "1." 和 "Hello" 之间的间距。

注意：我使用下面的样式，因为我希望编号从最左边开始。

    ol
    {
        word-break: break-all;
    }
    li
    {       
        list-style-position: inside;
        padding: 0;
    }

我想要的效果如下图所示，除了编号和文本之间的空格（如图片中标记的）之外，其他都可以得到。

- Manoj Shenoy

Answer 1

请注意，您的代码中使用了 .li 而不是 li。

ol {
  word-break: break-all;
  margin: 0;
  padding: 0;
}
ol ol {
    margin-left: 2em;
}
li {
  list-style-position: inside;
  padding: 0;
}
li::before {
  content: "";
  width: 20px;
  display: inline-block;
}

<ol>
  <li>Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello.
    Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello.</li>
  <li>Test.</li>
  <ol>
    <li>Hello.Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello. Hello.</li>
    <li>Test.</li>
  </ol>
</ol>

- CoderPi

---

先生，我希望它从最左边开始，下一行应该在数字下方开始。 例如：如果点“1”的句子换到新行，那么新行应该从“1”下面开始。感谢您的支持。在您的代码中，“1”是在5-6个空格之后开始的，我猜。 - Manoj Shenoy

@ManojShenoy，这完全不同于你的问题 =( - CoderPi

@ManojShenoy，这是给你的。 - CoderPi

当我运行你的代码时，列表从5-6个空格后开始，我希望它从最左边开始。 - Manoj Shenoy

@ManojShenoy，这是你最终想要的吗？ - CoderPi

Answer 2

注意：您可以使用此代码添加空格。

<ol style="padding-left:1em">
  <li style="padding-left:1em">Some text</li>
</ol>

- Parth Raval

Answer 3

尝试在li中添加padding-left:25px;

- Frank W.

---

没有起作用。可能是因为我使用了list-style-position: inside。 - Manoj Shenoy

我认为你需要移除列表样式位置，手动定位有序列表。 - Frank W.