如何使用HTML5+CSS3设置无序列表无标点横向排列

作者：小胖吴 | 创建时间: 2023-05-31

在CSS3属性中，有属性list-style，可以用来设置无序列表每项前显示图标。无序列表子项前显示小黑圆点，有时根据需求需要去掉这个点；无序列表默认是垂直展示每项，如果做成菜单，需要横向排列。下面利用一个实例讲述属性list-style控...

第一步，打开HBuilder后新建Web项目，在指定目录pages新建静态页面ul.html，并引入Bootstrap相关的样式文件，如下图所示：

第二步，在<body></body>标签元素内插入一个无序列表，以星期作为数据源；利用Bootstrap设置div布局样式，如下图所示：

第三步，保存代码并预览页面，可以看到无序列表以默认形式展示出来，如下图所示：

第四步，给ul添加一个class属性，利用类选择器设置无序列表 list-style:none; float:left; 如下图所示：

第五步，再次保存代码并在浏览器中预览页面，可以看到无序列表前的小圆点已去掉，纵向排列变为横向排列，如下图所示：

第六步，利用CSS3获取元素子节点的选择器分别设置无序列表子项字体颜色，如下图所示：

注意CSS3属性list-style的用法和属性值的不同含义

注意CSS3中的选择器，获取某个元素的方法