如何通过CSS在有序列表中缩进第二行？

260

我想要一个“内部”列表，其中列表项目符号或十进制数字与上等文本块完全对齐。列表条目的第二行必须具有与第一行相同的缩进！

例如：

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的“列表样式位置”仅提供两个值-内部和外部。对于“内部”，第二行与列表点齐平，而不与上一行齐平：

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”。

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

html  css  html-lists 
— 克恩弗鲁赫特
source
1
用户Pali Madra将此添加为答案，但由于不包含进一步的解释而被删除。他说jsfiddle可能就是您想要的东西：jsfiddle.net/palimadra/CZuXY/1
— bfavaretto 2012年
尝试将padding-left设置为仅...
— matzone
3
如果有人偶然发现了这个问题，而这个人只是在寻找“基本列表缩进”，请看一下这个问题（stackoverflow.com/questions/17556496/…）和Natasha Banegas回答。
— SunnyRed 2014年
没有一个答案可以解决实际问题。实际的问题是如何使列表中的数字左对齐，而当列表项的文本溢出到第二行或后续行时，分别将列表项的文本与其上方的项文本左对齐。默认情况下（几乎在每个答案中），列表的数字都是右对齐的，列表项的文本是左对齐的。
— 杰西·韦斯特莱克

Answers:

267

更新资料

这个答案已经过时了。您可以更简单地执行此操作，如下面的另一个答案所指出：

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/

在此处输入图片说明

要使其在IE8中工作，请使用:before带有冒号的旧记法。

— 用户123444555621
source
2
@Perelli foo只是一个任意字符串（ID），它被用来连接counter-reset，counter-increment和counter()属性。
— user123444555621 2013年
3
您还可以通过position: relative在<li>和position: absolute生成的内容上使用来避免出现表格混乱的情况。有关示例，请参见jsfiddle.net/maryisdead/kgr4k。
— maryisdead 2014年
2
@maryisdead为什么40px？当计数器的宽度超过最大值时，它将中断。使用表格布局的全部目的是浏览器将自动适应内容。
— user123444555621
5
很好，但是您如何控制<li>下边距？<li>的高度仅由其中的表格单元格元素的高度确定。因此，这些元素上的边距，填充和高度无效。如何解决此限制？
— hschmieder 2015年
3
如果您有多行列表项，并且需要一致的垂直间距，则解决方案是在ol选择器中添加垂直边框间距，例如border-spacing：0 3px; 表格单元格上的常规填充无效，因为该数字始终仅为一行。
— RemBem
207

我相信这会满足您的需求。

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

JSFiddle：https：//jsfiddle.net/dzbos70f/

在此处输入图片说明

— 托兰多
source
21
如果您还添加padding-left：1em，则更好；
— BenceGacsályi13年
16
到目前为止，这是此页面中所有解决方案的最佳答案。它比其他人方便得多。如果您犹豫要选择哪个答案，请选择此答案。
— Valentin Mercier 2014年
25
@loremmonkey这既快速又肮脏，但这不是真正的解决方案。首先，1em不等于缩进的空间。线条不会在像素方向上完美对齐。第二，当列表达到10时该怎么办？100？文本缩进将不起作用，无法对齐。这个答案应该被否决。
— 2015年
1
@Sunny这是一个没有编号的光盘列表，那么为什么要计数到100？使用上述代码，我的列表完全没有问题。
— lorem猴子
2
@loremmonkey缩进不是1em。 oi60.tinypic.com/a0eyvs.jpg第一个列表项是使用上面的文本缩进技术。与通常使用list-style-position的外观相比：在外部未对齐，在这种情况下偏移了一个像素。
— 2015年
39

最简单，最干净的方法（没有任何破解）是使ul（或ol）缩进，如下所示：

ol {
  padding-left: 40px; // Or whatever padding your font size needs
  list-style-position: outside; // OPTIONAL: Only necessary if you've set it to "inside" elsewhere
}

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

屏幕截图：

在此处输入图片说明

— 查克·勒·巴特
source
1
您可能需要申请list-style-position: outside到<li>。
— 亚历克斯（Alex）
@Alex仅在强制覆盖现有样式（developer.mozilla.org/en/docs/Web/CSS/list-style-position）时才需要这样做。
— Chuck Le Butt
25

检查这个小提琴：

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>

的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/

记下它。

— Deepan Babu
source
谢谢，它非常适合UL和OL多达9个列表条目。这是我在问题宽度11/12中描述的主要问题。在上面的示例中，我运行了另一种技术，因此问题看起来有所不同，但问题的核心保持不变：如果我的十进制列表点具有一个或两个或多个数字（例如1.，11或111.！我无法通过CSS做出反应并将文本缩进和左边距调整为数字的数量。
— kernfrucht 2012年
对于ol的第二行缩进（多于一个数字），我认为CSS无法解决。我们应该只使用jQuery。
— Deepan Babu 2012年
还要注意，该type属性<ol>似乎在HTML 5中已弃用。请style="list-style-type: "改用。
— AJ。
2
你们中有21个人甚至认真吗？这行不通。自发布后不确定是否更改了代码。
— JGallardo '17
9

您可以在ol或ulCSS中设置边距和填充

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
— luke2012
source
不幸的是，该解决方案无法解决问题：第二行与列表点齐平，而不是上一行的宽度，请参见上面的示例
— kernfrucht 2012年
jsfiddle.net/j7MEd/1中的 11和12 与顶部和底部的段落对齐，并且我没有更改代码。我想念什么吗？
— luke2012
不，那不是重点。主要问题是每个列表点的第二行（和第三行等）与第一行的“缩进”不同！（请参阅jsfiddle-example）。在上面的问题中，我考虑了有关填充，边距等的解决方法，但它仅适用于无序列表。在有序列表上，会出现类似此11/12的新问题。因此，我的主要问题是：如何在不出现11/12之类的问题的情况下，为有序列表完成缩进（如我在第一个示例中所介绍的那样）。
— kernfrucht 2012年
好吧，抱歉！这是一种方法..唯一的问题是要实现跨浏览器，您需要在IE中设置边距，在Firefox中设置边距。jsfiddle.net/j7MEd/2
— luke
7

我相信您只需要将列表“项目符号”放在填充之外。

li {
    list-style-position: outside;
    padding-left: 1em;
}
— 已知颜色
source
6

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

— LaFaucon
source
5

以下CSS可以达到目的：

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}
— oc鱼
source
4

我的解决方案与Pumbaa80的解决方案完全相同，但我建议使用display: table代替display:table-rowfor 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的

— 亚历克斯
source
1

我本人非常喜欢这种解决方案：

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;
}
— 科里·巴鲁
source
唯一的问题是字体大小
— atilkan
0

如果需要，也可以使用ol，ul列表，也可以使用带边框的表：css中没有。

— 休闲机器人
source
我认为这不是关于语义规则的好解决方案
— kernfrucht
0

CSS的“列表样式位置”仅提供两个值-内部和外部。对于“内部”，第二行与列表点齐平，而不与上一行齐平：

在有序列表中，无需干预，如果将“ list-style-position”的值设置为“ inside”，则长列表项的第二行将没有缩进，但将返回列表的左边缘（即将与商品编号左对齐）。这是有序列表所特有的，在无序列表中不会发生。

如果改为给“ list-style-position”值“ outside”，则第二行的缩进与第一行相同。

我有一个带边框的清单，有这个问题。将“列表样式位置”设置为“内部”时，我的列表看起来并不像我想要的那样。但是，将“列表样式位置”设置为“外部”时，列表项的数量不在框内。

我通过简单地为整个列表设置一个较宽的左页边距来解决此问题，这将整个列表向右推，回到了原来的位置。

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;">
— 克里斯
source
-1

好的，我回去了，想出了一些办法。这是我提出的粗略解决方案，但似乎可以起作用。

首先，我使数字成为一系列无序列表。通常，无序列表在每个列表项的开头都有一张光盘（

  • ），因此您必须将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;

    }

    这似乎使第二个div中的文本与第一个div中的有序列表中的数字对齐。我已经用标签将列表和文本都包围了，这样我就可以告诉所有div显示为嵌入式块。这很好地排列了他们。

    边距用于在句点和文本开头之间留一个空格。否则，他们会碰到彼此，看起来就像是在打眼。

    我的雇主希望包裹的文字（用于较长的书目条目）与第一行的开头对齐，而不是与左边距对齐。最初，我对正的页边距和负的文本缩进感到烦躁，但是后来我意识到，当我切换到两个不同的div时，这样做的效果是使文本全部对齐，因为div的左侧边距是文本自然开始的空白处。因此，我所需要的只是0.2em的余量来增加一些空间，其他所有东西都排列整齐。

    如果OP遇到类似的问题，我希望这会有所帮助...我很难理解他/她。

    • — 大卫
    source
    -1

    我遇到了同样的问题，并开始使用user123444555621的答案。但是，我还需要为每个添加padding和，该解决方案不允许这样做，因为每个都是a 。borderlilitable-row

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

    然后，设置display: table;在每个li与display: table-cell上:before给我们的压痕。

    最后，棘手的部分。由于我们没有为整个表格使用表格布局，因此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>
    展开摘要

    — 雅各布·阿尔瓦雷斯
    source
    By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
    Licensed under cc by-sa 3.0 with attribution required.