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

我想有一个“内部”列表与列表子弹或十进制数字都与上级文本块齐平。列表条目的第二行必须具有与第一行相同的缩进!

例如:

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”提供了两个值——内部和外部。在“inside”中，第二行与列表点齐平，而不是与上一行齐平:

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text

宽度“外面”我的列表不再与优越的文本块。

实验width 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

与“3.”和“4.”相比，“11.”和“12.”与上级文本块不一致。

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

当前回答

如果你想，ol, ul列表也可以工作，你也可以在css中使用一个带border: none的表。

2012-06-06 20:04:25

其他回答

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

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

2012-05-03 09:44:59

更新

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

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中工作，使用legacy:before符号加一个冒号。

2013-07-07 18:55:03

下面的CSS做到了这一点:

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

2018-07-17 19:48:15

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

2012-11-30 14:34:27

我相信你只需要把列表“子弹”之外的填充物。

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

2015-03-24 23:23:31

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

推荐文章

最新文章

标签