311

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

例如：

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

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

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

4

14 回答 14

305

更新

这个答案已经过时了。正如下面另一个答案中所指出的，您可以更简单地执行此操作：

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带有一个冒号的遗留符号。

于 2013-07-07T18:55:03.873 回答
231

我相信这会满足您的需求。

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

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

在此处输入图像描述

于 2013-07-07T17:29:48.850 回答
46

最简单和最干净的方法，没有任何技巧，就是缩进ul（或ol），如下所示：

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

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

截屏：

在此处输入图像描述

于 2015-08-18T13:22:08.403 回答
26

检查这个小提琴：

http://jsfiddle.net/K6bLp/

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

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-03T14:03:48.760 回答
11

您可以在 CSS中设置ol或设置边距和内边距：ul

ol {
  margin-left: 0;
  padding-left: 3em;
  list-style-position: outside;
}
于 2012-05-03T09:44:59.380 回答
8

您可以使用 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-30T14:34:27.937 回答
8

下面的 CSS 做到了：

ul {
  margin-left: 1em;
}
    
li {
  list-style-position: outside;
  padding-left: 0.5em;
}
于 2018-07-17T19:48:15.903 回答
7

我相信您只需要将列表“子弹”放在填充之外。

li {
  list-style-position: outside;
  padding-left: 1em;
}
于 2015-03-24T23:23:31.437 回答
6

我的解决方案与Pumbaa80的解决方案完全相同，但我建议使用display: table而不是display:table-rowfor lielement。所以它会是这样的：

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所以现在我们可以使用边距作为's之间的间距

于 2014-09-10T15:30:05.533 回答
2

我自己非常喜欢这个解决方案：

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;
}
于 2016-10-20T10:35:05.270 回答
0

如果您愿意，ol、ul 列表将起作用，您还可以在 css 中使用带边框的表格：无。

于 2012-06-06T20:04:25.637 回答
0

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

在有序列表中，如果没有干预，如果你给“list-style-position”值“inside”，长列表项的第二行将没有缩进，但会回到列表的左边缘（即它将与项目的编号左对齐）。这是有序列表特有的，在无序列表中不会发生。

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

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

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

CSS：

ol.classname {边距：0；填充：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;">
于 2013-11-25T17:24:32.223 回答
-1

好的，我已经回去并想通了一些事情。这是我提议的粗略解决方案，但它似乎是可行的。

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

  • ) 所以你必须将 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.2em 的边距来增加一些空间，而其他所有东西都排列整齐。

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

    • 于 2013-10-15T19:35:17.420 回答
    -1

    我遇到了同样的问题并开始使用user123444555621 的答案。但是，我还需要向each添加padding和 a ，该解决方案不允许这样做，因为 each是 a 。borderlilitable-row

    首先，我们使用 acounter来复制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>

    于 2016-06-30T22:00:48.067 回答