Question

我希望有一个“内部”列表，列表项目符号或十进制数字都与高级文本块齐平。第二行列表条目必须与第一行具有相同的缩进！

E.g：

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

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

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/

enter image description here

要使其在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/

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

<强> 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

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

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

Answer 6

我相信你只需要将名单'bullet'放在填充之外。

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

如果你想要你也可以使用ol，ul列表，你也可以使用带有border：none的表格。

Answer 12

CSS为其“list-style-position”提供了两个值 - 内部和外部。使用“内部”第二行与列表点齐平，而不是使用上级行：

在有序列表中，没有干预，如果给“list-style-position”值为“inside”，则长列表项的第二行将没有缩进，但将返回列表的左边缘（即它将与项目的编号保持对齐）。这是有序列表所特有的，并且不会出现在无序列表中。

如果您改为将“list-style-position”赋予值“outside”，则第二行将具有与第一行相同的缩进。

我有一个带边框的列表并遇到了这个问题。将“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：

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

Answer 13

好的，我已经回去想办法了。这是我提议的粗略解决方案，但它似乎有用。

首先，我将这些数字设为一系列无序列表。无序列表通常在每个列表项的开头都有一个光盘（

），因此您必须将CSS设置为list-style：none;

然后，我将整个列表显示为：table-row。在这里，为什么我不粘贴代码而不是喋喋不休？

<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中的文本与第一个div中有序列表中的数字对齐。我用标签包围了列表和文本，这样我就可以告诉所有div显示为内联块。这很顺利。

边距是在文本的句点和开头之间放置一个空格。否则，它们会相互碰撞，看起来像是一个眼睛。

我的雇主希望包裹文本（对于更长的书目条目）与第一行的开头对齐，而不是左手边距。最初我正在坐立不动，带有正余量和负文本缩进，但后来我意识到当我切换到两个不同的div时，这样做的效果是让文本全部排成一行，因为div的左边缘是文本自然开始的边缘。因此，我所需要的只是0.2米的余量，以增加一些空间，其他一切都在游泳。

我希望如果OP遇到类似问题会有所帮助......我很难理解他/她。

Answer 14

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

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

然后，我们在display: table;上的每个li和display: table-cell设置:before给我们缩进。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

14 个答案:

更新

原始答案