Question

我正在寻找一种水平显示有序列表的方法带数字。没有脚本可以做到这一点吗？使用display: inline-block时，数字似乎消失了：

li { 
  display: inline-block 
}

<ol>
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
</ol>

Answer 1

当您在list-item媒体资源中使用display以外的任何内容时，编号就会消失，但您可以使用counter将其取回。

＆＃13;

ol {
  margin: 0;
  padding: 0;
  counter-reset: list-c;
}
ol li {
  display: inline-block;
  counter-increment: list-c;
  padding-left: 25px;
  position: relative;
}
ol li:before {
  content: counter(list-c) '.';
  display: inline-block;
  text-align: center;
  position: absolute;
  left: 10px;
}

＆＃13;

<ol>
  <li>Example</li>
  <li>Example</li>
  <li>Example</li>
</ol>

＆＃13;

Answer 2

添加float: left;代替display: inline-block。

演示：https://jsfiddle.net/k5u8ozes/1/

此外，您应该清除浮动并设置一些margin-right。

水平有序列表

2 个答案: