如何去掉li标签前面的圆点

文章最后更新时间:2023年08月12日已超过980天没有更新。

在设计网站页面的时候经常会用到li标签,但是在标签文字的前面会出现一个圆点如下图,如何去掉呢?简单写个教程记录下如何去掉li标签前面的圆点,同时也给需要同学提供一丢丢帮助。

image.png

解决办法

我们可以使用如下样式代码实现,代码意思是设置列表项目样式为不使用项目符号

list-style: none;

image.png

示例代码

<!DOCTYPE html>
<html>
<head>
<title>测试网站</title>
<style>
li{
list-style: none;
}
</style>
</head>
<body>
<li>测试标题一</li>
<li>测试标题二</li>
<li>测试标题三</li>
<li>测试标题四</li>
<li>测试标题五</li>
</body>
</html>

更多list-style代码用法

list-style的取值如下

代码用法代码解释
list-style: disc;默认值,实心圆
list-style: circle;空心圆
list-style: square;实心方块
list-style: decimal;阿拉伯数字
list-style: lower-roman;小写罗马数字
list-style: upper-roman;大写罗马数字
list-style: lower-alpha;小写英文字母
list-style: upper-alpha;大写英文字母
list-style: none;不使用项目符号


© 除非注明,否则均为阿豪运维笔记原创文章,转载或复制请以超链接形式并注明出处

取消
微信二维码
微信二维码
支付宝二维码