CSS 允许我们将图像用作项目符号，但对外观和位置几乎没有控制。
HTML 项目符号可以通过使用 CSS list-style-image 属性替换为图像。
但是使用这个属性的问题在于，我们也几乎无法控制它们与列表项的外观。
在我们的代码片段中，我们将展示如何正确使用填充来克服这种困难，并将填充不仅应用于列表项，还应用于图像。
我们需要结合使用背景和填充属性。
让我们看看如何一步一步地做到这一点。
创建 HTML
- 使用 <h1> 标签。
- 使用带有四个 <li> 元素的 <ul> 元素。
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h1>Example</h1>
<ul>
<li>List item1</li>
<li>List item1</li>
<li>List item1</li>
<li>List item1</li>
</ul>
</body>
</html>
现在，为 <ul> 标签内的 <li> 元素设置样式。
添加 CSS
- 添加背景属性并指定图像的 URL。
此外，指定“无重复”和“左中心”值。
- 指定填充属性。
- 将列表样式设置为“无”。
- 添加边距和垂直对齐属性。
ul li {
background: url('/arrow-right.4aad274a.png') no-repeat left center;
padding: 5px 10px 5px 25px;
list-style: none;
margin: 0;
vertical-align: middle;
}
我们代码的完整示例如下所示。
调整列表样式图片位置示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
ul li {
background: url('/arrow-right.4aad274a.png') no-repeat left center;
padding: 5px 10px 5px 25px;
list-style: none;
margin: 0;
vertical-align: middle;
}
</style>
</head>
<body>
<h1>Example</h1>
<ul>
<li>List item1</li>
<li>List item1</li>
<li>List item1</li>
<li>List item1</li>
</ul>
</body>
</html>
日期：2020-06-02 22:14:55 来源：oir作者：oir