如何通过CSS在有序列表中保留第二行的缩进？
我想有一个“内部”列表，列表中的项目符号或十进制数字都与上级文本块齐平。 列表项的第二行必须像第一行一样具有相同的缩进！
例如：
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 1. Text 2. Text 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text second line of longer Text 4. Text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. CSS只为其“list-style-position”提供了两个值 – 内部和外部。 第二行的“内部”与列表点不一致：
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text second line of longer Text 4. Text
我的列表“宽度”“外”不再与上级文本块齐平。
对于无序列表，宽度为text-indent，padding-left和margin-left的实验工作，但是对于有序列表，因为它取决于列表的十进制字符数：
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text second line of longer Text 4. Text 11. Text 12. Text
“11.” 和“12.” 与“3”相比，不与上级文本块齐平。 和“4.”。
那么有序列表和二线缩进的秘密在哪里呢？ 谢谢你的努力！
我很惊讶地看到这还没有解决。 您可以使用浏览器的表格布局algorithm（不使用表格），如下所示：
ol { counter-reset: foo; display: table; } ol > li { counter-increment: foo; display: table-row; } ol > li::before { content: counter(foo) "."; display: table-cell; /* aha! */ text-align: right; }
演示： http : //jsfiddle.net/4rnNK/1/
要使其在IE8中工作，请使用legacy :before用一个冒号表示。
我相信这会做你正在寻找的东西。
.cssClass li { list-style-type: disc; list-style-position: inside; text-indent: -1em; padding-left: 1em; }
JSFiddle： https ：//jsfiddle.net/dzbos70f/
检查这个小提琴：
它显示了如何使用CSS手动缩进ul和ol。
HTML
<head> <title>Lines</title> </head> <body> <ol type="1" style="list-style-position:inside;"> <li>Text</li> <li>Text</li> <li >longer Text, longer Text, longer Text, longer Text second line of longer Text </li> </ol> <br/> <ul> <li>Text</li> <li>Text</li> <li>longer Text, longer Text, longer Text, longer Text second line of longer Text </li> </ul> </body>
CSS
ol { margin:0px; padding-left:15px; } ol li { margin: 0px; padding: 0px; text-indent: -1em; margin-left: 1em; } ul { margin:0; padding-left:30px; } ul li { margin: 0px; padding: 0px; text-indent: 0.5em; margin-left: -0.5em; }
我也编辑你的小提琴
记下它。
最简单，最干净的方法，没有任何黑客，只是缩进ul （或ol ），如下所示：
ol { padding-left: 40px; list-style-position: outside; }
这给出了与接受的答案相同的结果： https ： //jsfiddle.net/af2fqryz/
截图：
您可以在CSS中设置ol或ul的边距和填充
ol { margin-left: 0; padding-left: 3em; list-style-position: outside; }
我相信你只需要在填充之外放置“子弹”列表。
li { list-style-position: outside; padding-left: 1em; }
你可以使用CSS来select一个范围; 在这种情况下，你想要列表项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/
我的解决scheme和Pumbaa80完全一样，但我build议使用display: table而不是display:table-row for li元素。 所以会是这样的：
ol { counter-reset: foo; /* default display:list-item */ } ol > li { counter-increment: foo; display: table; /* instead of table-row */ } ol > li::before { content: counter(foo) "."; display: table-cell; text-align: right; }
所以，现在我们可以利用利润来隔开li的空间
我自己很喜欢这个解决scheme：
ul { list-style-position: inside; list-style-type: disc; font-size: 12px; line-height: 1.4em; padding: 0 1em; } ul li { margin: 0 0 0 1em; padding: 0 0 0 1em; text-indent: -2em; }
ol，ul列表将工作，如果你想要的话，你也可以在css中使用带有边框的表格：none。
好吧，我已经回去弄清楚了一些事情。 这是我提出的一个粗糙的解决scheme，但它似乎是function性的。
首先，我把这些数字编成了一系列无序列表。 无序列表通常会在每个列表项目的开头都有一个光盘（
然后，我做了整个列表显示：表行。 在这里，为什么我不粘贴你的代码，而不是喋喋不休呢？
<html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>Result</title> </head> <body> <div><ul> <li>1.</li> <li><p>2.</p></li> <li>10.</li> <li><p>110.</p></li> <li>1000.</li> </ul> </div> <div> <p>Some author</p> <p>Another author</p> <p>Author #10</p> <p>Author #110</p> <p>The one thousandth author today will win a free i-Pod!!!! This line also wraps around so that we can see how hanging indents look.</p> </div> </body> </html>'
CSS：
ul li{ list-style: none; display: table-row; text-align: right;
}
div { float: left; display: inline-block; margin: 0.2em;
}
这似乎将第二个div中的文本与第一个div中的有序列表中的数字alignment。 我已经用列表包围了列表和文本，以便我可以告诉所有div显示为内嵌块。 这使他们很好地排队。
边缘是在这段时间和文本的开始之间放置一个空格。 否则，他们就会互相攻击，看起来像是一个眼神。
我的雇主希望包装的文本（用于较长的书目logging）与第一行的开始alignment，而不是左侧的空白。 最初我是一个积极的边缘和一个负面的文字缩进坐起来，但后来我意识到，当我切换到两个不同的div，这有这样的效果，使文本全部排队，因为div的左侧边距是文本自然开始的边缘。 因此，我所需要的只是一个0.2em的余量来增加一些空间，其他的一切都是一帆风顺的。
如果OP有类似的问题，我希望这会有帮助…我很难理解他/她。
CSS只为其“list-style-position”提供了两个值 – 内部和外部。 第二行的“内部”与列表点不一致：
在有序列表中，如果没有干预，如果给“list-style-position”值“inside”，长列表项的第二行将没有缩进，但会回到列表的左边缘将与项目号码左alignment）。 这是有序列表特有的，不会在无序列表中发生。
如果您将“list-style-position”的值设置为“outside”，则第二行将与第一行具有相同的缩进。
我有一个边界的列表，并有这个问题。 当“list-style-position”设置为“inside”时，我的列表看起来并不像我想要的那样。 但是当“列表式位置”设置为“外部”时，列表项的数量落在框外。
我通过简单地为整个列表设置一个更宽的左边距来解决这个问题，这个列表把整个列表推向右边，回到之前的位置。
CSS：
ol.classname {margin：0; padding：0;}
ol.classname li {margin：0.5em 0 0 0; padding-left：0; list-style-position：outside;}
HTML：
<ol class="classname" style="margin:0 0 0 1.5em;">
我有这个相同的问题，并开始使用user123444555621的答案 。 不过，我还需要为每个li添加padding和border ，因为每个li都是一个table-row ，所以这个解决scheme是不允许的。
首先，我们使用一个counter来复制ol的数字。
然后我们设置display: table; 在每个li display: table-cell :before给我们的缩进。
最后，棘手的部分。 由于我们没有使用整个ol的表格布局，所以我们需要确保每一个:before是相同的宽度。 我们可以使用ch单位大致保持宽度等于字符数。 为了在:before的位数不同时保持宽度一致，我们可以实现数量查询 。 假设您知道您的列表不会超过100件，您只需要一个数量查询规则即可:before更改其宽度:before ，您可以轻松添加更多。
ol { counter-reset: ol-num; margin: 0; padding: 0; } ol li { counter-increment: ol-num; display: table; padding: 0.2em 0.4em; border-bottom: solid 1px gray; } ol li:before { content: counter(ol-num) "."; display: table-cell; width: 2ch; /* approximately two characters wide */ padding-right: 0.4em; text-align: right; } /* two digits */ ol li:nth-last-child(n+10):before, ol li:nth-last-child(n+10) ~ li:before { width: 3ch; } /* three digits */ ol li:nth-last-child(n+100):before, ol li:nth-last-child(n+100) ~ li:before { width: 4ch; }
<ol> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li> </ol>
