数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会科学
时尚研究
法律研究如何使用CSS创建没有项目符号的无序列表？
有序或无序列表都会分别带有数字或项目符号。这是使用 list-style-type 属性设置的网页列表样式。让我们看看如何创建没有项目符号的无序列表。
创建无序列表
使用 <ul> 元素创建无序列表 −
<ul> <li>Tiger</li> <li>Giraffe</li> <li>Lion</li> <li>Panther</li> <li>Jaguar</li> </ul>
设置列表样式并删除项目符号
将 list-style-type 属性设为 none 可从无序列表中删除项目符号 −
ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 18px;
font-weight: bold;
}
示例
若要使用 CSS 创建没有项目符号的无序列表，代码如下 −
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Remove bullets from ul example</h1>
<ul>
<li>Tiger</li>
<li>Giraffe</li>
<li>Lion</li>
<li>Panther</li>
<li>Jaguar</li>
</ul>
</body>
</html>
在列表中用图像替换项目符号
在列表中使用 list-style-image 可将图像设为列表项标记项目符号的位置。若要将图像设为标记的位置，请对 list-style 属性使用 url()。我们已设置一个项目符号图像 −
ul {
list-style: url("https://tutorialspoint.com/images/clipart/bullet/bullet2.gif");
}
示例
让我们看看示例 −
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: url("https://tutorialspoint.com/images/clipart/bullet/bullet2.gif");
}
</style>
</head>
<body>
<h1>Sports</h1>
<ul>
<li>Cricket</li>
<li>Football</li>
<li>Hockey</li>
</ul>
</body>
</html>
更新于： 14-Dec-2023
521 次浏览
广告