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

html CSS

西门

2020-03-24

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

例如：

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

So where's the secret about ordered lists and the second-line-indent? Thank's for your effort!

第3506篇《如何通过CSS在有序列表中缩进第二行？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共12个回答

猴子村村 2020.03.24

我遇到了同样的问题，并开始使用user123444555621的答案。但是，我还需要为每个添加paddinga ，该解决方案不允许这样做，因为每个都是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>

西门 2020.03.24

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

Green老丝Itachi 2020.03.24

以下CSS可以达到目的：

ul{
    margin-left: 1em;
}

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

Stafan 2020.03.24

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

十三 2020.03.24

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

十三 2020.03.24

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

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

伽罗理查德 2020.03.24

我的解决方案与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的

樱理查德 2020.03.24

检查这个小提琴：

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/

记下它。

Near理查德路易 2020.03.24

I believe this will do what you are looking for.

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

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

Harry神奇 2020.03.24

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

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

梅 2020.03.24

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

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

乐米亚 2020.03.24

更新资料

这个答案已经过时了。正如您所指出的那样，您可以更简单地完成此操作，我很惊讶地看到这还没有解决。您可以像这样使用浏览器的表布局算法（不使用表）：

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/

在此处输入图片说明