如何通过CSS保持缩进第二行有序列表？如何通过CSS保持缩进第二行有序列表？(How to keep

2019-05-13 18:55发布

站内文章 / 前沿技术

16 0

傲

女 | 书童

私信

我想有列表项目符号或十进制数为全冲洗具有超强的文本块的“内部”名单。列表项的第二行必须有像第一行相同的缩进！

例如：

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只提供了两个用于其“目录样式位置”的价值观 - 内部和外部。与“内部”第二线与该列表点不与上级行冲洗：

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. 

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

那么，是关于有序列表和第二行缩进的秘密是什么？谢谢你的努力！

Answer 1:

更新

这个答案已经过时。您可以在此更简单地做了很多，如指出我很惊讶地看到这个尚未解决。您可以使用浏览器的表格布局算法（不使用表）是这样的：

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有一个冒号表示。

Answer 2:

我相信这会做你在找什么。

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

的jsfiddle： https://jsfiddle.net/dzbos70f/

Answer 3:

最简单和干净的方法，没有任何黑客，是刚刚缩进ul （或ol ），就像这样：

ol {
  padding-left: 40px;
  list-style-position: outside;
}

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

截图：

Answer 4:

检查此琴：

http://jsfiddle.net/K6bLp/

它显示了如何手动缩进UL和OL使用CSS。

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/

请记下它。

Answer 5:

你可以设定一个的margin和padding ol或ul在CSS

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

Answer 6:

我相信你只需要把名单“子弹”填充之外。

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

Answer 7:

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

Answer 8:

我的解决方案是完全一样Pumbaa80的一个，但我建议使用display: table ，而不是display:table-row的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的

Answer 9:

我很喜欢这种解决方案我自己的：

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

Answer 10:

下面的CSS的伎俩：

ul{
    margin-left: 1em;
}

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

Answer 11:

没有在CSS：本OL，如果你愿意，你也可以使用带有边框的表格无序列表会工作。

Answer 12:

CSS只提供了两个用于其“目录样式位置”的价值观-内部和外部。 与“内部”第二线与该列表点不与上级行冲洗：

在有序列表，不进行干预，如果你给“列表样式位置”值“内部”，一个长长的清单项目的第二行就没有缩进，但将返回到列表的左侧边缘（即它与该项目的数量将左对齐）。这是特有的有序列表和无序列表不会发生。

如果改为给予“列表样式位置”值“外”，第二行有相同的缩进第一线。

我有一个边界列表，并有这个问题。随着“列表样式位置”设置为“内部”，我的名单并不像我想它。但随着“列表样式位置”设置为“外部”，列表中的项目数量下降外箱。

我通过简单地设置一个更广泛的左边距为整个列表，从而拉高了整个列表向右，回到它是在之前的位置解决了这个。

CSS：

ol.classname {余量：0;填充：0;}

ol.classname李{余量：0.5em 0 0 0;填充左：0;列表样式位置：外;}

HTML：

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

Answer 13:

好吧，我已经走了回来，想通了一些事情了。这是一个粗略的解决了我的建议，但它似乎是功能性的。

首先，我做了编号一系列无序列表中。无序列表通常会有一个盘在各列表项的开始（

）所以你要设置的CSS列表样式：无;

于是，我做了整个名单显示：表行。在这里，我为什么不只是贴上你的代码，而不是gabbing呢？

<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Result</title>
</head>
<body>
    <div><ul>
        <li>1.</li>
        <li><p>2.</p></li>
        <li>10.</li>
        <li><p>110.</p></li>
        <li>1000.</li>
    </ul>
    </div>
    <div>
        <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>
        </div>
</body>
</html>'

CSS：

ul li{
list-style: none;
display: table-row;
text-align: right;

}

div {
float: left;
display: inline-block;
margin: 0.2em;

}

这似乎对准与在第一个div有序列表中号码的第2格中的文本。我已经包围这两个列表，文本与标签，这样我就可以告诉所有的div显示为内联块。这一字排开起来很好。

保证金是没有把周期与文本的开始之间的空间。否则，它们运行正对着彼此，它看起来像一个碍眼。

我的雇主通缉的卷绕文本（更长bibliograhical条目）与第一行的开始，而不是左边距排队。本来我是用切缘阳性和阴性文本缩进坐立不安，但后来我意识到，当我切换到两个不同的div，这已经使得它使文本中的所有排队，因为效果的div的左边距是其中的文字自然开始的空白。因此，所有我需要的是一个0.2em保证金增加一些空间，以及其他一切一字排开顺顺当当。

我希望这可以帮助，如果OP是有一个类似的问题...我有一个很难理解他/她。

Answer 14:

我有同样的问题，并开始使用user123444555621的答案。不过，我也需要添加padding和border每个li ，这是解决方案不允许，因为每个li是一个table-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>

文章来源: How to keep indent for second line in ordered lists via CSS?