我想有一个“内部”列表与列表子弹或十进制数字都与上级文本块齐平。列表条目的第二行必须具有与第一行相同的缩进!
例如:
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”提供了两个值——内部和外部。在“inside”中，第二行与列表点齐平，而不是与上一行齐平:
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text
宽度“外面”我的列表不再与优越的文本块。
实验width 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
与“3.”和“4.”相比，“11.”和“12.”与上级文本块不一致。
那么关于有序列表和第二行缩进的秘密在哪里呢?谢谢你的努力!
好吧，我回过头来想明白了一些事情。这是我提出的一个粗略的解决方案，但它似乎是功能性的。
首先，我把这些数字做成一系列无序的列表。无序列表通常在每个列表项()的开头都有一个磁盘，因此您必须将CSS设置为列表样式:none;
然后，我将整个列表显示为:table-row。为什么我不直接把代码粘贴给你而不是喋喋不休地唠叨呢?
<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;
}
这似乎使第2个div中的文本与第一个div中的有序列表中的数字对齐。我已经用标记包围了列表和文本，以便我可以告诉所有div显示为内联块。这使它们很好地排列起来。
边距是在句号和正文开头之间留出一个空格。否则，它们就会撞在一起，看起来很碍眼。
My employer wanted wrapped-around text (for longer bibliograhical entries) to line up with the start of the first line, not the left-hand margin. Originally I was fidgeting with a positive margin and a negative text indent, but then I realized that when I switched to two different divs, this had the effect of making it so that the text all lined up because the left-hand margin of the div was the margin where text naturally began. Thus, all I needed was a 0.2em margin to add some space, and everything else lined up swimmingly.
我希望这有助于如果OP有类似的问题…我很难理解他/她。
我有同样的问题，并开始使用user123444555621的答案。但是，我还需要为每个li添加填充和边框，这是该解决方案不允许的，因为每个li是一个表行。
首先，我们使用一个计数器来复制ol的数字。
然后我们设置display: table;在每个li和display: table单元格上的:之前给我们的缩进。
最后是棘手的部分。因为我们没有为整个ol使用表格布局，我们需要确保每个:before是相同的宽度。我们可以使用ch单位来大致保持宽度等于字符数。为了在:before的位数不同时保持宽度一致，我们可以实现数量查询。假设你知道你的列表不会有100个或更多的项目，你只需要一个数量查询规则来告诉:在改变它的宽度之前，但你可以很容易地添加更多。
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>
好吧，我回过头来想明白了一些事情。这是我提出的一个粗略的解决方案，但它似乎是功能性的。
首先，我把这些数字做成一系列无序的列表。无序列表通常在每个列表项()的开头都有一个磁盘，因此您必须将CSS设置为列表样式:none;
然后，我将整个列表显示为:table-row。为什么我不直接把代码粘贴给你而不是喋喋不休地唠叨呢?
<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;
}
这似乎使第2个div中的文本与第一个div中的有序列表中的数字对齐。我已经用标记包围了列表和文本，以便我可以告诉所有div显示为内联块。这使它们很好地排列起来。
边距是在句号和正文开头之间留出一个空格。否则，它们就会撞在一起，看起来很碍眼。
My employer wanted wrapped-around text (for longer bibliograhical entries) to line up with the start of the first line, not the left-hand margin. Originally I was fidgeting with a positive margin and a negative text indent, but then I realized that when I switched to two different divs, this had the effect of making it so that the text all lined up because the left-hand margin of the div was the margin where text naturally began. Thus, all I needed was a 0.2em margin to add some space, and everything else lined up swimmingly.
我希望这有助于如果OP有类似的问题…我很难理解他/她。
