CSS |列表项上方单个垂直列中的有序列表答案

【问题标题】：CSS | Ordered list in single vertical column above list itemCSS |列表项上方单个垂直列中的有序列表
【发布时间】：2015-09-18 17:31:21
【问题描述】：

我希望创建一个有序列表（十进制），其中所有项目都与它们的数字标题对齐。例如：

列表

1.

这是列表项 1

2.

这是列表项 2

3.

这是列表项 3

我一直在环顾四周，但没有找到任何实现这一点的方法。我仍然想使用 an，因为它比手动输入数字更好。反正有没有把它当作一个单一的列来对待和列出？

【问题讨论】：

请提供小提琴链接，很容易回答您的问题
看this DEMO。这对你来说足够了吗？
@Crabolo，我通常包含代码 sn-ps 但在这种情况下，我无法远程使其按预期运行，所以我希望“图表”就足够了。包含的代码最多是一个带有填充和边距重置的

标签： html css html-lists

【解决方案1】：

看哪，CSS 计数器！我将 cmets 放在解释解决方案的 CSS 中。 This article by Louis Lazaris 很好地解释了细节。

.fancy-list {
  margin: 0;
  padding: 0;
  list-style: none; /* hide original list numbering */
  counter-reset: ordered-list; /* initialize CSS counter */
}
.fancy-list li {
  margin-bottom: 12px;
}
.fancy-list li::before {
  display: block; /* display numbering as block to force content down */
  margin-bottom: 4px;
  counter-increment: ordered-list; /* increment CSS counter for every <li> in the list */
  content: counter(ordered-list) "."; /* output counter value and append a "." */
}

<p>This solution has the following benefits:</p>
<ol class="fancy-list">
  <li>does not require superfluous HTML</li>
  <li>maintains semantics of an ordered list</li>
  <li>is flexible; doesn't matter how many items you have</li>
  <li>you don't need to adjust the left margin for list items if you change the list's left margin</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

【讨论】：

【解决方案2】：

您可以在每个li元素之前创建一个空块元素，这样您就可以实现li内容在新行上的效果，而无需在每个列表项的开头键入<br/>。

li{
    float: left;
    clear: both;
}
li:before { content: ' '; display: block; }

<ol> 
    <li> list item </li>
    <li> list item </li>
    <li> list item </li>
    <li> list item </li>
</ol>

你可以在每个li元素之前创建一个空的块元素，这样你就可以达到换行的效果。

试试这个fiddle

【讨论】：

这用 2 个 cols 渲染：一个用于
1. 。我正在寻找一个单一的 col 解决方案。

【解决方案3】：

正如@Imgonzalves 指出的那样 ---

HTML

<ol>
    <li><span>list item</span></li>
    <li><span>list item</span></li>
    <li><span>list item</span></li>
</ol>

CSS

ol li span {
    position: relative;
    left: -20px;
    display:block;
}

包括他的笔：https://jsfiddle.net/lmgonzalves/z4gafdp7/

【讨论】：