猿问

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

如何通过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”提供了两个值 - 内部和外部。使用“内部”第二行与列表点齐平,而不是使用上级行:


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适用于无序列表,但它们对于有序列表失败,因为它取决于list-decimal的字符数:


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


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


九州编程
浏览 1257回答 3
3回答
随时随地看视频慕课网APP
我要回答