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


How to keep indent for second line in ordered lists via CSS?

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

例如。：

1
2
3
4
5
6
7
8
9
10
11
12
13
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"提供两个值-内部和外部。 对于"内部"，第二行与列表点齐平，而不与上一行齐平：

1
2
3
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可以用于无序列表，但不能用于有序列表，因为它取决于列表小数的字符数：

1
2
3
4
5
6
7
8
 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"。

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

相关讨论

更新资料

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

1
2
3
ul {
  list-style-position: outside;
}

参见https://www.w3schools.com/cssref/pr_list-style-position.asp

原始答案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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表示法。

相关讨论

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

1
2
3
4
5
6
.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(或ol)，如下所示：

1
2
3
4
ol {
  padding-left: 40px;
  list-style-position: outside; // Only necessary if you've set it to"inside" elsewhere
}

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

屏幕截图：

enter image description here

相关讨论

检查这个小提琴：

http://jsfiddle.net/K6bLp/

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

的HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<head>
    Lines
</head>

<body>
   
       
<li>
Text
</li>

       
<li>
Text
</li>

        <li >longer Text, longer Text, longer Text, longer Text    second line of longer Text        
</li>

     
    <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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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/

记下它。

相关讨论

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

1
2
3
4
5
ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
相关讨论

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

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

您可以使用CSS选择范围；在这种情况下，您需要列出项目1-9：

1
ol li:nth-child(n+1):nth-child(-n+9)

然后适当调整这些第一项的边距：

1
2
3
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/

我的解决方案与Pumbaa80的解决方案完全相同，但我建议对li元素使用display: table而不是display:table-row。
因此它将是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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

以下CSS可以达到目的：

1
2
3
4
5
6
7
8
ul{
    margin-left: 1em;
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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仅为其" list-style-position"提供两个值-内部和外部。对于"内部"，第二行与列表点齐平，而不与上一行齐平：

在有序列表中，无需干预，如果为" 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：

1
 

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

相关讨论

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

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

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

最后，棘手的部分。由于我们没有为整个ol使用表格布局，因此我们需要确保每个:before的宽度相同。我们可以使用ch单位使宽度大致等于字符数。为了在:before的位数不同时保持宽度均匀，我们可以实现数量查询。假设您知道列表不会超过100个项目，则只需要一个数量查询规则来告诉:before更改其宽度，但是您可以轻松添加更多。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<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>

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

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

  • )，因此您必须将CSS设置为列表样式：none;

    然后，我显示了整个列表：table-row。在这里，为什么我不只是粘贴代码而不是乱扔代码呢？

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    <html>
    <head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        Result
    </head>
    <body>
       
    <ul>

           
    <li>
    1.
    </li>

           
    <li>
    <p>
    2.
    </p>
    </li>

           
    <li>
    10.
    </li>

           
    <li>
    <p>
    110.
    </p>
    </li>

           
    <li>
    1000.
    </li>

       
    </ul>

       
       
            <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>
           
    </body>
    </html>'

    CSS：

    1
    2
    3
    4
    ul li{
    list-style: none;
    display: table-row;
    text-align: right;

    }

    1
    2
    3
    4
    div {
    float: left;
    display: inline-block;
    margin: 0.2em;

    }

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

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

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

    我希望这对OP遇到类似问题有帮助...我很难理解他/她。