如何保持缩进第二行在有序的列表通过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”提供了两个值——内部和外部。在“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.”与上级文本块不一致。

那么关于有序列表和第二行缩进的秘密在哪里呢?谢谢你的努力!

392654 次浏览
小开

你可以在CSS中设置ol或ul的边距和填充:

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
小开

看看这把小提琴:

http://jsfiddle.net/K6bLp/

它展示了如何使用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>
</html>

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;
}

我还编辑了你的小提琴:

http://jsfiddle.net/j7MEd/3/

记下来。

小开

如果你想，ol, ul列表也可以工作，你也可以在css中使用一个带border: none的表。

小开

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

小开

我相信这能满足你的需要。

.cssClass li {
list-style-type: disc;
list-style-position: inside;
text-indent: -1em;
padding-left: 1em;
}

JSFiddle: https://jsfiddle.net/dzbos70f/

enter image description here

小开
最佳答案

更新

这个答案已经过时了。你可以更简单地做到这一点，正如下面的另一个答案所指出的:

ul {
list-style-position: outside;
}

看到https://www.w3schools.com/cssref/pr_list-style-position.asp

原来的答案

我很惊讶这个问题还没有解决。你可以像这样使用浏览器的表布局算法(不使用表):

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/

enter image description here

为了让它在IE8中工作，使用遗留的:before符号和一个冒号。

小开

好吧，我回过头来想明白了一些事情。这是我提出的一个粗略的解决方案，但它似乎是功能性的。

首先，我把这些数字做成一系列无序的列表。一个无序列表通常会在每个列表项的开头有一个光盘(

  • )，所以你必须将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显示为内联块。这使它们很好地排列起来。

    边距是在句号和正文开头之间留出一个空格。否则，它们就会撞在一起，看起来很碍眼。

    我的雇主想让文本(用于较长的书目条目)与第一行的开头对齐，而不是左侧的空白。最初，我摆弄的是一个正边距和一个负文本缩进，但后来我意识到，当我切换到两个不同的div时，这有一个效果，使它使文本全部对齐，因为div的左边边距是文本自然开始的地方。因此，我所需要的只是0.2em的边缘来增加一些空间，其他一切都很顺利。

    我希望这有助于如果OP有类似的问题…我很难理解他/她。

    • 小开

    CSS只为它的“list-style-position”提供了两个值——内部和外部。在“inside”中，第二行与列表点齐平，而不是与上一行齐平:

    在有序列表中，如果你给“list-style-position”赋值“inside”，那么长列表项的第二行将没有缩进，而是回到列表的左边缘(即它将与该项的编号左对齐)。这是有序列表所特有的，在无序列表中不会发生。

    如果将"list-style-position"的值改为"outside"，那么第二行缩进将与第一行相同。

    我有一个带边界的列表，遇到了这个问题。当“list-style-position”设置为“inside”时，我的列表看起来并不像我想要的那样。但是当“list-style-position”设置为“outside”时，列表项的数量就落在了框外。

    我通过简单地为整个列表设置一个更大的左距来解决这个问题，这将整个列表推向右边，回到它之前的位置。

    CSS:

    ol。classname{保证金:0;填充:0;}

    ol。}类名li {margin:0.5em 0 0 0;padding-left:0;

    HTML:

    <ol class="classname" style="margin:0 0 0 1.5em;">
    小开
    我的解决方案与Pumbaa80的解决方案完全相同，但我建议对li元素使用display: table而不是display:table-row。 它是这样的:

    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之间的间距

    小开

    我相信你只需要把列表“子弹”之外的填充物。

    li {
list-style-position: outside;
padding-left: 1em;
}
    小开

    最简单和最干净的方法，不需要任何hack，就是缩进ul(或ol)，如下所示:

    ol {
padding-left: 40px; // Or whatever padding your font size needs
}

    这将给出与接受的答案相同的结果:https://jsfiddle.net/5wxf2ayu/

    截图:

    enter image description here

    小开

    我有同样的问题，并开始使用user123444555621的回答。然而，我还需要在每个li中添加padding和border，这是该解决方案不允许的，因为每个li都是table-row。

    首先，我们使用counter来复制ol的数字。

    然后，我们在每个li上设置display: table;，在:before上设置display: table-cell，以得到缩进。

    最后是棘手的部分。由于我们没有为整个ol使用表格布局，所以需要确保每个:before的宽度相同。我们可以使用ch单位来大致保持宽度等于字符数。为了在:before的位数不同时保持宽度一致，我们可以实现量查询。假设你知道你的列表不会有100项或更多，你只需要一个数量查询规则来告诉: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>

    小开

    我自己就很喜欢这个解决方案:

    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;
}
    小开

    下面的CSS做到了这一点:

    ul {
margin-left: 1em;
}
    

li {
list-style-position: outside;
padding-left: 0.5em;
}

    提交答案