如何保持缩进第二行在有序的列表通过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.”与上级文本块不一致。

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

当前回答

最简单和最干净的方法，没有任何hack，就是缩进ul(或ol)，像这样:

ol {
  padding-left: 40px; // Or whatever padding your font size needs
}

这将给出与接受的答案相同的结果:https://jsfiddle.net/5wxf2ayu/

截图:

2015-08-18 13:22:08

其他回答

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

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

2012-05-03 09:44:59

看看这把小提琴:

http://jsfiddle.net/K6bLp/

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

HTML

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

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/

记下来。

2012-05-03 14:03:48

最简单和最干净的方法，没有任何hack，就是缩进ul(或ol)，像这样:

ol {
  padding-left: 40px; // Or whatever padding your font size needs
}

这将给出与接受的答案相同的结果:https://jsfiddle.net/5wxf2ayu/

截图:

2015-08-18 13:22:08

我相信这能满足你的需要。

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

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

2013-07-07 17:29:48

CSS只为它的“list-style-position”提供了两个值——内部和外部。在“inside”中，第二行与列表点齐平，而不是与上一行齐平:

在有序列表中，如果你给“list-style-position”赋值“inside”，那么长列表项的第二行将没有缩进，而是回到列表的左边缘(即它将与该项的编号左对齐)。这是有序列表所特有的，在无序列表中不会发生。

如果将"list-style-position"的值改为"outside"，那么第二行缩进将与第一行相同。

我有一个带边界的列表，遇到了这个问题。当“list-style-position”设置为“inside”时，我的列表看起来并不像我想要的那样。但是当“list-style-position”设置为“outside”时，列表项的数量就落在了框外。

我通过简单地为整个列表设置一个更大的左距来解决这个问题，这将整个列表推向右边，回到它之前的位置。

CSS:

ol。classname{保证金:0;填充:0;}

ol。}类名li {margin:0.5em 0 0 0;padding-left:0;

HTML:

<ol class="classname" style="margin:0 0 0 1.5em;">

2013-11-25 17:24:32

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

推荐文章

最新文章

标签