html 中有序列表的正确缩进
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3758900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
proper indenting for ordered lists in html
提问by reggie
I cannot get an ordered list to show proper indenting. The numbers are all aligned to the right. So the browser (Chrome) shows a space before the single digit numbers and only aligns the double digit numbers correctly to the left.
我无法获得显示正确缩进的有序列表。数字都向右对齐。因此，浏览器（Chrome）在一位数之前显示一个空格，并且只将两位数正确地向左对齐。
How can I output a nice ordered list where the numbers are all aligned to the left and the list items all start below each other?
如何输出一个漂亮的有序列表，其中数字都向左对齐并且列表项都从彼此下方开始？
回答by Jo Sprague
Actually, the solution is pretty simple, just set
其实解决办法很简单，只要设置
ol {list-style-position: inside;}
And your numbers should "align to the left" like you want.
你的数字应该像你想要的那样“向左对齐”。
回答by Paul
Late to the party but I've just been wrestling with this problem myself and ended up using this combo which adds a zero before any single digit list items:
聚会迟到了，但我自己一直在努力解决这个问题，最终使用了这个组合，它在任何一位数字列表项之前添加了一个零：
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;
}
回答by Christian Nesmark
If you don't mind using absolute positioning, this might work for you.
如果您不介意使用绝对定位，这可能对您有用。
<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>
Note:If you've got anything appearing to the left of the <ol>element on your page (like a floating div), that content will move the numbers to the right, but not the acutal <li>content.
注意：如果您<ol>的页面元素左侧出现任何内容（如浮动 div），则该内容会将数字向右移动，但不会将实际<li>内容移动到右侧。
You could also use a whole different technique, with a different markup (nested div elements) with display:table and display:table-cell properties set. That would eliminate the issue with elements appearing on the left, but would require you to utilize the CSS counterproperty.
您还可以使用完全不同的技术，使用不同的标记（嵌套的 div 元素）并设置 display:table 和 display:table-cell 属性。这将消除元素出现在左侧的问题，但需要您利用 CSScounter属性。
回答by LaFaucon
You can use CSS to select a range; in this case, you want list items 1-9:
您可以使用 CSS 来选择一个范围；在这种情况下，您需要列出项目 1-9：
ol li:nth-child(n+1):nth-child(-n+9)
Then adjust margins on those first items appropriately:
然后适当调整这些第一项的边距：
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; }
See it in action here: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/
在这里查看它的实际效果：http: //www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/
回答by Stefan Vilonel
Jo Sprague was not too far off, but it's actually outside and not inside as stated above.
Jo Sprague 离得不太远，但实际上它在外面而不是上面所说的里面。
It becomes immediately apparent if the contents of a liwraps to a new line.
如果 a 的内容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>
Here is a good codepen https://codepen.io/pen/for testing.
这是一个很好的 codepen https://codepen.io/pen/用于测试。
