在此代码中，我们可以找到一些控制项目符号和 <li> 元素之间间距的方法。
最好的方法是使用 HTML <span> 元素。
将内容放入一个 <span> 中，并将 CSS position 属性设置为“relative”，并添加 left 属性来控制空间。
使用 <span> 元素更改项目符号和列表项之间的空间的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
li {
color: #666666;
}
span {
position: relative;
left: -12px;
}
</style>
</head>
<body>
<ul>
<li>
<span>Text 1</span>
</li>
<li>
<span>Text 2</span>
</li>
<li>
<span>Text 3</span>
</li>
</ul>
</body>
</html>
在下一个示例中，我们将使用 padding-left 属性实现相同的目的。
调整 <li> 元素的内边距允许我们根据需要在项目符号和文本之间添加尽可能多的另外空间。
当文本大小增加时，项目符号将按比例缩放。
使用 padding-left 属性更改项目符号和列表项之间的空间的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
ul {
padding-left: 50px
}
ul li {
padding-left: 50px
}
</style>
</head>
<body>
<ul>
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
</body>
</html>
如果使用此方法，请注意项目符号和文本必须具有相同的颜色。
此外，我们无法将项目符号移动到比浏览器默认设置更靠近文本的位置，并且我们无法控制项目符号的垂直定位。
在我们的最后一个示例中，我们使用 background 属性来添加箭头而不是项目符号。
更改项目符号和列表项之间的空间的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
ul {
padding-left: 2em;
}
ul li {
list-style-type: none;
padding-left: 2em;
color: #f00;
background: url('/arrow-right.png') no-repeat center left;
}
ul li span {
display: block;
margin-left: -0.5em;
color: #000;
}
</style>
</head>
<body>
<ul>
<li>some text</li>
<li>
<span>Text 1</span>
</li>
<li>
<span>Text 2</span>
</li>
<li>
<span>Text 3</span>
</li>
</ul>
</body>
</html>
这里我们也在 <li> 和 <ul> 元素上使用了 padding-left 属性。
然后，我们为 <li> 标签内的 <span> 元素指定 margin-left 和 display 属性。
日期：2020-06-02 22:15:06 来源：oir作者：oir