display:inline

这个可以实现不换行排列，比如下面的代码和实现的无序列表横排效果。

<body>
    <ul>
        <li>竖排列表</li>
        <li>竖排列表</li>
    </ul>
    <ul>
        <li style="display:inline">横排列表</li>
        <li style="display:inline">横排列表</li>
    </ul>
</body>

image

但这里的问题是，横排之后前面的索引小圆点没有了。

li:before

我们知道，对于无序列表ul，前面的小圆点可以用list-style-type:square或者list-style-image:url来改变，但变为横向列表之后，这个方法就无效了。

不过我们可以手工模拟，使用ul li:before{content:'◆ '}就是在无序列表内每个<li>的开始添加一个小菱形。这里可以使用任意的特殊符号作为索引图形，可用的特殊符号很多，可以网上搜索到，直接复制过来。

代码和效果如下。

<body>
    <style>
        #h-ul li::before {
            content: '😆  ';
        }
    </style>
    <ul id='h-ul' style="padding-left: 0;">
        <li style="display:inline">横排列表</li>
        <li style="display:inline">横排列表</li>
    </ul>
</body>

image

这里我们使用了emoji表情文字，它和特殊符号一样可以搜索到然后复制替换。这里并没有改变所有无序列表，而是限定了只改变带有属性id='h-ul'的。

ol的序号

对于有序列表，CSS语法无法自动生成1234…序号，我们只能使用JavaScript来实现。代码和效果如下。

<body>
    <ol style="padding-left: 0;">
        <li class="h-ol-li" style="display:inline;">横排列表</li>
        <li class="h-ol-li" style="display:inline;">横排列表</li>
    </ol>
    <script>
        Array.from(document.getElementsByClassName('h-ol-li')).map((item, n) => {
            item.innerHTML = n + 1 + '. ' + item.innerHTML
        }) 
    </script>
</body>

image

这里使用了getElementsByClassName获取了一个HTMLCollection对象，然后把它转化成Array,使用map方法对每个item进行修改，在开头添加数字。

自定义序号

使用下面的代码可以实现更自由的有序列表序号设定。

<body>
    <ol style="padding-left: 0;">
        <li class="h-ol-li" style="display:inline;">横排列表</li>
        <li class="h-ol-li" style="display:inline;">横排列表</li>
    </ol>
    <script>
        tags = ['一', '二', '三'] //有序列表数量不能超过这个数字
        dot = '、 '
        Array.from(document.getElementsByClassName('h-ol-li')).map((item, n) => {
            item.innerHTML = tags[n] + dot + item.innerHTML
        }) 
    </script>
</body>