html中有序列表的正确缩进答案

【问题标题】：proper indenting for ordered lists in htmlhtml中有序列表的正确缩进
【发布时间】：2018-05-19 20:48:47
【问题描述】：

我无法获得一个有序列表来显示正确的缩进。数字都向右对齐。所以浏览器（Chrome）在个位数之前显示一个空格，并且只将两位数正确地对齐到左边。

我怎样才能输出一个很好的有序列表，其中数字都向左对齐并且列表项都从彼此下方开始？

【问题讨论】：

您需要显示一些代码或屏幕截图。

【解决方案1】：

其实解决方法很简单，设置就行了

ol {list-style-position: inside;}

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

【讨论】：

数字左对齐，是的。但是 li 的内容没有对齐。
好吧，现在你太挑剔了。 ;) 为您的 li 添加一些左侧填充，看看是否可行。 li{padding-left: 4em;}

【解决方案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;
}

【讨论】：

@Mark 在 0 之后添加任何单元看起来像是从 Firebug 复制粘贴的，当然 :) 至于 hacky 部分，令我惊讶的是，它似乎在 IE8+ 中工作MDN：list-style-type。所以为保罗+1，欢迎！ :)
不，我的意思是“十进制前导零”，我从未在任何 CSS 中看到过。
它是supported in IE8 and up，可能在大多数其他主要浏览器中也是如此。实际上，我从dev.opera 得到了我的线索，并认为如果 Opera 支持它，它一定是非常标准的 css。

【解决方案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 属性。

【讨论】：

非常感谢。那效果很好。我只需要删除左侧的填充，现在它看起来就是我想要的样子。
呃。嗯...在测试页面上看起来还不错。不过，我将无法使用绝对定位。

【解决方案4】：

您可以使用 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/

【讨论】：

这种方法的问题是它选择了孩子，而不是第 n 个列表项。假设我的列表从 3 开始，那么第 10 个孩子将是第 12 项。10 和 11 不会正确缩进。

【解决方案5】：

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>

这是一个很好的代码笔 https://codepen.io/pen/ 用于测试。

【讨论】：