CSS横排ul和ol
2020-08-02 本文已影响0人
zhyuzh3d
在Html开发中，如何实现有序列表ol和无序列表ul的横向排列？保留索引序号或圆点，以及更多。
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>
image
欢迎访问我的个人站点，获取最新文章和更多资源
image
