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

我遇到了同样的问题，并开始使用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>

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

以下CSS可以达到目的：

ul{
    margin-left: 1em;
}

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

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

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

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

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

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

检查这个小提琴：

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/

记下它。

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/

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

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

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

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

更新资料

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

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一个冒号中使用旧记法。