数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何控制项目符号和<li>元素之间的间距？
列表是一个包含简短相关信息的集合，可用于在网页上以有序或无序格式显示数据或信息。HTML 列表用于指定信息列表。所有列表都可以包含一个或多个列表元素。HTML 列表共有三种。
有序列表 (ol): 此列表使用数字方案列出项目。
无序列表 (ul): 此列表使用普通项目符号列出项目。
定义列表 (dl): 此列表以字典格式排列项目。
我们可以通过在 HTML 中创建无序列表来创建 HTML 项目符号。HTML 中的无序列表，也称为 HTML 项目符号列表，是 HTML 列表的一种常见类型。与有序列表不同，您在 HTML 中使用项目符号列表来列出不需要按顺序排列的项目。
在无序列表中创建 HTML 项目符号
要在无序列表中创建 HTML 项目符号，我们必须使用两个不同的标签。首先，我们必须将文本用<ul>...</ul>标签括起来以创建项目符号列表。其次，我们必须用<li>...</li>标签将列表中的每一项括起来。在创建 HTML 项目符号时，我们有三种格式选项可供选择。
我们可以选择创建圆圈、正方形或圆点。圆点是默认选项。STYLE 属性用于指定项目符号的样式。然后，我们必须将其值设置为“list-style-type:format”，其中 format 是圆圈、正方形或圆点的文字。我们必须在<ul>开始标签中包含‘style’属性。
考虑一下这个项目符号和文本之间具有默认间距的简单无序列表。
示例
<!DOCTYPE html>
<html>
<head>
<title>How to Control the Space Between Bullets and <li> Elements </title>
</head>
<body>
<h3>Seven Wonders of the World</h3>
<ul>
<li>The Great Wall of China</li>
<li>Chichen Itza</li>
<li>Christ the Redeemer</li>
<li>Matchu Picchu</li>
<li>Petra</li>
<li>Taj Mahal</li>
<li>Colosseum</li>
</ul>
</body>
</html>
在这篇文章中，我们将讨论一些可以帮助控制项目符号和列表元素之间间距的方法。
使用 Span 元素
<span> 标签是一个内联容器，用于标记文本部分或文档部分。使用 class 或 id 属性，<span> 标签可以轻松地使用 CSS 进行样式设置或使用 JavaScript 进行操作。它类似于<div>标签，但<div>是块级元素，而<span>是内联元素。以下是语法
<span class="">Some Text</span>
示例
下面的示例显示了如何通过将列表文本插入 span 标签来更改项目符号和列表元素之间的间距。
<!DOCTYPE html>
<html>
<head>
<title>How to Control the Space Between Bullets and <li> Elements</title>
<style>
body{
background-color:lightyellow;
margin-left:200px;
margin-top:100px;
}
li {
color: slategrey;
}
span {
position: relative;
left: -10px;
}
</style>
</head>
<body>
<h3>Seven Wonders of the World</h3>
<ul>
<li>
<span> The Great Wall of China</span>
</li>
<li>
<span>Chichen Itza</span>
</li>
<li>
<span>Christ the Redeemer</span>
</li>
<li>
<span>Matchu Picchu</span>
</li>
<li>
<span>Petra</span>
</li>
<li>
<span>Taj Mahal</span>
</li>
<li>
<span>Colosseum</span>
</li>
</ul>
</body>
</html>
使用 Padding-left 属性
填充 (Padding) 是元素内容与其边框之间的空间。它在元素内创建额外的空间，而边距 (margin) 在元素周围创建额外的空间。padding-left 属性指定元素的左边距 (空间)。
语法
以下是语法
padding-left: length|percentage|initial|inherit;
示例
在这个示例中，我们将看到如何调整列表元素的填充，从而控制项目符号和文本之间的间距。项目符号会根据文本大小进行缩放。
<!DOCTYPE html>
<html>
<head>
<title>How to Control the Space Between Bullets and <li> Elements</title>
<style>
body{
background-color:lavender;
margin-left:200px;
margin-top:100px;
}
div ul li {
padding-left: 40px;
color:darkblue;
background-color:lightcyan;
}
div p{
font-size:20px;
font-weight:600;
background-color:white;
width:300px;
text-align:center;
}
div ul{
padding-left:70px;
background-color:azure;
width:230px;
}
</style>
</head>
<body>
<div>
<p>Factors of Good Health</p>
</div>
<div>
<ul>
<div>
<li>The Great Wall of China</li>
<li>Chichen Itza</li>
<li>Christ the Redeemer</li>
<li>Matchu Picchu</li>
<li>Petra</li>
<li>Taj Mahal</li>
<li>Colosseum</li>
</div>
</ul>
</div>
</body>
</html>
在这种方法中，我们必须记住项目符号和文本必须是相同的颜色。此外，我们无法将项目符号移动到比浏览器默认值更靠近文本的位置，并且我们无法控制项目符号的垂直位置。
1K+ 浏览量
