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

【问题标题】：How to keep indent for second line in ordered lists via CSS?如何通过 CSS 在有序列表中保持第二行的缩进？
【发布时间】：2012-05-12 19:28:00
【问题描述】：

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

例如：

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

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

【问题讨论】：

用户 Pali Madra 将此添加为答案，但由于不包含进一步的解释而被删除。他说 jsfiddle 可能就是你要找的东西：jsfiddle.net/palimadra/CZuXY/1
尝试设置 padding-left only ...
如果有人偶然发现这个问题，谁只是在寻找“基本列表缩进”，请查看这个问题 (stackoverflow.com/questions/17556496/…) 和 Natasha Banegas 的回答。
没有一个答案能解决实际问题。实际的问题是如何左对齐列表中的数字，同时当文本溢出到第二行或后续行时，将列表项的文本与其上方的项目文本分别左对齐。默认情况下——几乎在每个答案中——列表的数字都是右对齐的，列表项的文本是左对齐的。

标签： html css html-lists

【解决方案1】：

更新

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

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 表示法。

【讨论】：

您还可以通过在生成的内容上使用position: relative 和<li> 和position: absolute 来避免不稳定的表格内容。有关示例，请参见 jsfiddle.net/maryisdead/kgr4k。
@maryisdead 为什么是40px？ That will break when the counters are wider than that。使用表格布局的重点是浏览器会自动适应内容。
很好，但是你如何控制
下边距？
的高度完全由其中的表格单元格元素的高度决定。因此，这些元素的边距、内边距和高度不起作用。如何解决这个限制？

如果您有多行列表项，并且需要一致的垂直间距，解决方案是在 ol 选择器中添加垂直边框间距，例如边框间距：0 3px；表格单元格上的正常填充不起作用，因为数字始终只有一行。

这很糟糕...... LI 后的边距不起作用 - 我们基本上搞砸了 li 'display' 模式，它不再是一个有效的元素抢线了。你需要根据@ChuckLeButt 的回答来解决这个问题

【解决方案2】：

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

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

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

【讨论】：

如果你还添加 padding-left: 1em; 会更好
这是迄今为止此页面中所有解决方案的最佳答案。它比其他人方便得多。如果您在犹豫选择哪个答案，请选择这个。
@loremmonkey 这既快又脏，但不是真正的解决方案。首先，1em 不等于缩进的空间。线条不会完全按像素对齐。第二，当列表达到第 10 位时呢？ 100？文本缩进不起作用，它不会对齐。这个答案应该被否决。
@Sunny 这是一个光盘列表，不是编号的，为什么要数到 100？使用上面的代码，我的列表完全没有问题。
@loremmonkey 缩进不是1em。 oi60.tinypic.com/a0eyvs.jpg 第一个列表项使用上面的文本缩进技术。与使用 list-style-position: 的正常外观相比，它在外部未对齐，在这种情况下偏离了一个像素。

【解决方案3】：

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

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

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

截图：

【讨论】：

您可能需要将list-style-position: outside 申请到<li>。
@Alex 只有在强制覆盖现有样式 (developer.mozilla.org/en/docs/Web/CSS/list-style-position) 时才需要这样做。

【解决方案4】：

检查这个小提琴：

http://jsfiddle.net/K6bLp/

它展示了如何使用 CSS 手动缩进 ul 和 ol。

HTML

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

记下来。

【讨论】：

谢谢，它非常适合 UL 和 OL 最多 9 个列表条目。这是我在问题宽度为 11/12 的问题中描述的主要问题。在上面的示例中，我运行了另一种技术，因此问题看起来不同，但问题的核心保持不变：如果我的小数列表点有一个或两个或多个数字，则存在差异 - 例如1.、11. 或 111.！我看不出我可以通过 CSS 做出反应并将 text-indent 和 margin-left 调整为数字的数量。
对于ol的第二行缩进（多于一个数字），我认为CSS解决不了。我们应该只使用 jquery。
另请注意，<ol> 的 type 属性在 HTML 5 中似乎已被弃用。请改用 style="list-style-type: "。
你们 21 人是认真的吗？这不起作用。不确定您是否在发布后更改了代码。

【解决方案5】：

您可以在 CSS 中设置 ol 或 ul 的边距和内边距：

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

【讨论】：

不幸的是，这个解决方案没有解决这个问题：第二行与列表点齐平，而不是上一行的宽度，请参见上面的示例
jsfiddle.net/j7MEd/1 中的 11 和 12 与顶部和底部段落对齐，我没有更改代码。我错过了什么吗？
不，这不是重点。主要问题是每个列表点的第二行（和第三行等）与第一行的“缩进”不同！（参见 jsfiddle 示例）。在我上面的问题中，我考虑了一种使用填充、边距等的解决方法，但它仅适用于无序列表。在有序列表中，像这样的 11/12 事情会出现新问题。所以我的主要问题是：我怎样才能在没有像 11/12 这样的问题的情况下为有序列表完成缩进（就像我在我的第一个例子中展示的那样）。
好吧，对不起，你知道了！这是一种方法。唯一的问题是要实现跨浏览器，您需要在 IE 中设置边距，在 Firefox 中设置填充。 jsfiddle.net/j7MEd/2

【解决方案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/

【讨论】：

【解决方案7】：

下面的 CSS 做到了：

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

【讨论】：

【解决方案8】：

我相信您只需要将列表“子弹”放在填充之外。

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

【讨论】：

【解决方案9】：

我的解决方案与Pumbaa80 的解决方案完全相同，但我建议使用display: table 而不是display:table-row 作为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 之间的间距

【讨论】：

绝对最佳答案。

【解决方案10】：

我自己也很喜欢这个解决方案：

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

【讨论】：

【解决方案11】：

ol, ul 列表如果你愿意也可以使用，你也可以在 css 中使用带边框的表格：none。

【讨论】：

我认为这不是一个关于语义规则的好解决方案

【解决方案12】：

CSS 只为其“list-style-position”提供了两个值——内部和外部。 “内部”第二行与列表点齐平，而不是与上级线齐平：

在有序列表中，如果没有干预，如果你给“list-style-position”赋值“inside”，长列表项的第二行将没有缩进，但会回到列表的左边缘（即它将与项目的编号左对齐）。这是有序列表特有的，在无序列表中不会发生。

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

我有一个带边框的列表并且遇到了这个问题。将“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;">

【讨论】：

【解决方案13】：

好的，我已经回去想通了一些事情。这是我提议的粗略解决方案，但它似乎可以正常工作。

首先，我将数字设为一系列无序列表。无序列表通常在每个列表项的开头都有一个圆盘（

) 所以你必须将 CSS 设置为 list-style: 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 遇到类似问题，我希望这会有所帮助...我很难理解他/她。

【讨论】：

【解决方案14】：

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

首先，我们使用counter 来复制ol 的号码。

然后我们在每个li 和display: table-cell 上分别设置display: table; :before 以提供缩进。

最后，棘手的部分。由于我们没有为整个ol 使用表格布局，我们需要确保每个:before 的宽度相同。我们可以使用ch unit 来大致保持宽度等于字符数。为了在:before 的位数不同时保持宽度一致，我们可以实现quantity queries。假设您知道您的列表不会超过 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>

【讨论】：