Question

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

列表

1

这是列表项1

2

这是清单项目2

3

这是清单项目3

我一直在四处寻找，但没有找到任何实现方法。我仍然想使用，因为它比手动输入数字更好。无论如何要对待并列为单一col？

Answer 1

看哪，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>

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

您可以在每个li元素之前创建一个emtpy块元素，这样就可以实现在新行上的效果。

试试这个fiddle

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

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

3 个答案: