html - 无序列表 : how can I set the distance between bullets and items?

Question

在 HTML 无序列表 (ul) 中，如何设置标记和元素之间的距离，以使其正常(即，与所有其他类似有序列表和无序列表的默认距离)？

<p>Ordered list with "position:inside"</p>
<ol style="list-style-position:inside;">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>

<p><b>Unordered list with "position:inside"</b></p>
<ul style="list-style-position:inside;">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<p>Standard lists (without "position:inside")</p>
<ol>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ol>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

Answer 1

在我看来，您可以使用 :before 之类的东西并添加您的特定内容(例如 • )来创 build 置长度的错觉。

否则我看不出有什么方法可以满足您的要求。

[style="list-style-position:inside;"] li{
  list-style:none;
}

[style="list-style-position:inside;"] li:before{
  content: '•';
  margin-right: 7px; //Optional and adjustable
}

    <p>Ordered list with "position:inside"</p>
    <ol style="list-style-position:inside;">
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ol>

    <p><b>Unordered list with "position:inside"</b></p>
    <ul style="list-style-position:inside;">
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>

    <p>Standard lists (without "position:inside")</p>
    <ol>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ol>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>