html 中有序列表的正确缩进

Question

我无法获得有序列表来显示正确的缩进。 数字全部右对齐。 因此，浏览器（Chrome）会在单位数字之前显示一个空格，并且仅将两位数字正确地向左对齐。

如何输出一个漂亮的有序列表，其中数字全部向左对齐，并且列表项全部从彼此下方开始？

Answer 1

其实解决办法很简单，设置一下即可

ol {list-style-position: inside;}

你的数字应该像你想要的那样“向左对齐”。

Answer 2

聚会迟到了，但我自己一直在努力解决这个问题，最终使用了这个组合，它在任何一位数字列表项之前添加了一个零：

ol {
    margin:0px 0;
    padding:0;
    list-style: decimal-leading-zero inside none;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -2.2em;
    margin-left: 3.4em;
}

Answer 3

如果您不介意使用绝对定位，这可能适合您。

<style type="text/css">
li {
    list-style-position: inside;
}
.li-content {
    position: absolute;
    left: 80px;
}
</style>

<ol>
  <li><span class="li-content">Test content</span></li>
    (...)
  <li><span class="li-content">Test content</span></li>
</ol>

注意： 如果页面上

<ol>

元素左侧出现任何内容（例如浮动 div），该内容会将数字向右移动，但不会将实际的

<li>

内容移动。

您还可以使用完全不同的技术，使用不同的标记（嵌套 div 元素）并设置 display:table 和 display:table-cell 属性。这将消除元素出现在左侧的问题，但需要您使用 CSS

counter

属性。

Answer 4

Jo Sprague 离得不太远，但实际上是在外面，而不是上面所说的里面。

如果

li

的内容换行到新行，它会立即变得明显。

<style type="text/css">
   ol { width: 250px; }
   li { list-style-position: outside; }
</style>

<ol>
   <li>
       This is an list item that is very 
       long so you may know if the content 
       will be aligned to it's sibling
   </li>
   <li>Just a short list item</li>
</ol>

这里有一个很好的 codepen https://codepen.io/pen/ 用于测试。

Answer 5

您可以使用CSS来选择范围；在本例中，您需要列出项目 1-9：

ol li:nth-child(n+1):nth-child(-n+9) 

然后适当调整第一个项目的边距：

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }

在此处查看实际操作：http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

Answer 6

ol ol {
  counter-reset: item;
  padding-inline-start: 35px;
}
ol ol li {
  list-style-type: none;
}
ol ol li::before {
  content: counters(item, '', upper-latin)'.';
  counter-increment: item;
  display: inline-block;
  text-indent: -25px;
}

<ol>
  <li>item 1</li>
  <li>item 2</li>
    <ol>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
      <li>item 8</li>
      <li>item 9</li>
      <li>item 10</li>
      <li>item 11</li>
      <li>item 12</li>
      <li>item 13</li>
      <li>item 14</li>
    </ol>
  <li>item 15</li>
  <li>item 16</li>
</ol>

我知道这篇文章很旧，但是当我寻找解决方案时，它引导我来到这里。经过一番搜索，这就是我想到的：

可以使用带有内容计数器的伪元素（之前）来代替使用标记。

counters css 函数采用 counter-reset 中定义的计数器名称，后跟分隔符（本例中为空）和计数器样式（本例中为大写拉丁文）。由于我想在每个字母后面加一个句点，所以我在函数后面添加了它。分隔符仅用于多个计数器，例如 A.B，最后一个计数器没有得到它，因此对于一个计数器，它不会显示，这不是我想要的。

然后伪元素可以负缩进，而有序列表填充可用于调整列表内容的间距。