创建 HTML
- 使用 <h1> 和 <p> 元素。
- 使用 <ul> 标签创建一个无序列表。
- 在 <ul> 标签内添加 <li> 元素。
<h1>onitroad</h1> <p>Our books:</p> <ul> <li>Learn HTML</li> <li>Learn CSS</li> <li>Learn Javascript</li> <li>Learn Git</li> </ul>
添加 CSS
- 将 <ul> 元素的 list-style-type 属性设置为“none”。
ul {
list-style-type: none;
}
现在，我们可以看到我们代码的结果。
创建没有项目符号的无序列表的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
ul {
list-style-type: none;
}
</style>
</head>
<body>
<h1>onitroad</h1>
<p>Our books:</p>
<ul>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn Javascript</li>
<li>Learn Git</li>
</ul>
</body>
</html>
如果我们还想删除缩进，请使用设置为 0 的填充和边距属性。
在我们的下一个示例中，我们可以看到两个无序列表，其中一个带有项目符号，另一个没有任何项目符号和缩进。
创建没有项目符号和缩进的无序列表的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
ul.no-bullets {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h3>onitroad</h3>
<p>Our books (with bullets):</p>
<ul>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn Javascript</li>
<li>Learn Git</li>
</ul>
<p>Our books: (without bullets)</p>
<ul class="no-bullets">
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn Javascript</li>
<li>Learn Git</li>
</ul>
</body>
</html>
<ul> 标签用于指定没有数字顺序的项目。
此类列表的项目通常以项目符号显示。
但是，可以有一个没有任何项目符号的无序列表。
这该怎么做？
好吧，在这个片段中，我们将展示如何在用于父元素的 CSS list-style-type 属性的帮助下删除项目符号。
日期：2020-06-02 22:15:07 来源：oir作者：oir