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

Question

我想创建一个有序列表（十进制），其中所有项目 rag-left 与其数字 header 对齐。例如：

List

1.

This is list item 1

2.

This is list item 2

3.

This is list item 3

我一直在四处寻找，但没有找到任何实现方法。我仍然想使用 an，因为它比手动输入数字更好。反正有没有把和列为一个单一的列？

Answer 1

正如@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/

Answer 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

Answer 3

看，CSS 计数器！我在 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>

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

CSS | Ordered list in single vertical column above list item

html

css

html-lists