Question

我无法获得有序列表以显示正确的缩进。这些数字都与右边对齐。因此，浏览器（Chrome）在单个数字前显示一个空格，并且只能将两位数字正确地对齐到左侧。

如何输出一个好的有序列表，其中数字全部对齐到左边，列表项全部开始在彼此之下？

Answer 1

实际上，解决方案非常简单，只需设置

即可

ol {list-style-position: inside;}

你的数字应该像你想要的那样“左对齐”。

Answer 2

参加晚会但我自己一直在努力解决这个问题并最终使用这个组合，在任何单个数字列表项之前加零：

ol {
    margin:0px 0;
    padding:0;
    list-style: decimal-leading-zero inside none;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -2.2em;
    margin-left: 3.4em;
}

Answer 3

如果您不介意使用绝对定位，这可能对您有用。

<style type="text/css">
li {
    list-style-position: inside;
}
.li-content {
    position: absolute;
    left: 80px;
}
</style>

<ol>
  <li><span class="li-content">Test content</span></li>
    (...)
  <li><span class="li-content">Test content</span></li>
</ol>

注意：如果页面上的<ol>元素左侧出现任何内容（如浮动div），则该内容会将数字移到右侧，但不是真正的<li>内容。

你也可以使用一种完全不同的技术，使用不同的标记（嵌套的div元素）和display：table和display：table-cell properties set。这样可以消除左侧出现元素的问题，但需要您使用CSS counter属性。

Answer 4

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

Jo Sprague并不太远，但它实际上在外面，而不是如上所述。

如果TypeError: Argument 2 passed to PHPUnit\Framework\Assert::assertThat() must be an instance of PHPUnit\Framework\Constraint\Constraint, instance of Illuminate\Foundation\Testing\Constraints\HasInDatabase given, called in /project_path/vendor/laravel/framework/src/Illuminate/Foundation/Testing/Concerns/InteractsWithDatabase.php on line 22的内容换行到新行，则会立即显现。

li

这是一个很好的用于测试的代码集https://codepen.io/pen/。

正确缩进html中的有序列表

5 个答案: