我的目标是在ul class="perks0"中放置记号图像而不是项目符号我已经尝试了几乎所有我能在网上找到的东西，但似乎没有任何帮助，list-style-image和background-image都不起作用。图像根本没有显示，我不知道是什么问题，我在代码中找不到任何东西。此外，我认为显示灵活和合理的内容&container类中的align项是无用的，因为我有文本align:center；在正文标签中
这是HTML和CSS(以全尺寸运行页面，这样你就可以看到所有内容的样子(
body {
background-color: #161616;
text-align: center;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
}
header {
height: 3.375rem;
}
.ul1 {
list-style: none;
float: right;
}
#li3 {
display: inline;
color: white;
margin: 0.625rem;
position: relative;
right: 0.625rem;
}
a {
text-decoration: none;
color: white;
font-size: 1.063rem;
font-family: 'Prompt', sans-serif;
}
/* change px to rem*/
.img-1 {
text-align: center;
padding-top: 100px;
position: relative;
}
.img1 {
width: 12%;
}
.dd {
color: white;
font-family: 'Prompt', sans-serif;
font-size: 24px;
position: relative;
bottom: 40px;
left: 9px;
letter-spacing: 3px;
}
.search-bar1 {
position: relative;
bottom: 60px;
box-shadow: 1px;
}
* {
box-sizing: border-box;
}
form.form-1 input[type=text] {
padding: 10px;
font-size: 17px;
border: none;
text-align: center;
width: 45%;
height: 6.5vh;
background-color: #303030;
border-radius: 15px;
}
form.form-1 button {
text-align: center;
width: 3%;
height: 6vh;
padding: 10px;
background: #e84118;
color: white;
font-size: 17px;
border: black;
cursor: pointer;
box-shadow: 1px;
border-radius: 13px;
position: relative;
right: 46px;
}
form.form-1::after {
content: "";
clear: both;
display: table;
}
.search-bar1-2 {
position: relative;
right: 7px;
border: none;
}
input {
text-align: center;
color: white;
}
input:focus {
outline: transparent;
}
.security-1 {
position: relative;
bottom: 50px;
color: #F3F3F3;
}
.security1-2 {
font-family: 'Roboto', sans-serif;
font-size: 29px;
letter-spacing: 0.5px;
font-weight: 600;
}
.privacy-1 {
color: white;
font-family: 'Prompt', sans-serif;
font-size: 15px;
letter-spacing: 0.3px;
position: relative;
bottom: 58px;
font-weight: 600;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.perks0 {
color: white;
}
.perks {
display: inline;
margin: 20px;
list-style: inside;
background-image: url(https://i.imgur.com/R9KwXWT.png);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>DuckDuckGo</title>
</head>
<body>
<header>
<nav>
<ul class="ul1">
<li id="li3"><a href="https://duckduckgo.com/about" target="_blank">About</a></li>
<li id="li3"><a href="https://duckduckgo.com/hiring" target="_blank">Work</a></li>
<li id="li3"><a href="https://twitter.com/duckduckgo" target="_blank">Contact us</a></li>
</ul>
</nav>
</header>
<section class="pre-midpage">
<div class="img-1">
<img src="https://i.imgur.com/7bjqURH.png" alt="img-1" class="img1">
</div>
<br clear="img-1">
</section>
<div class="dd">
<h2>DuckDuckGo</h2>
</div>
<div class="search-bar1">
<form class="form-1">
<input type="text" class="search-bar1-1" name="search" placeholder="Search the web without being tracked...">
<button type="submit" class="search-bar1-2"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="security-1">
<h1 class="security1-2">Tired of being tracked online? We can help.</h1>
</div>
<div class="privacy-1">
<p>Get seamless privacy protection on your browser for free with one download:</p>
</div>
<div class="container">
<ul class="perks0">
<li class="perks">Private Search</li>
<li class="perks">Tracker blocking</li>
<li class="perks">Site Encryption</li>
</ul>
</div>
</body>
</html>使用list-style-image(以及list-style-type和任何list-style-*属性(时，目标元素也必须具有display: list-item，否则这些属性将被忽略，但.perks规则具有display: inline。
ul.perksList {
display: flex;
justify-content: space-between;
/* Normalize <ul> box: */
margin: 0;
padding: 0;
}
ul.perksList > li {
display: list-item;
margin: 20px;
list-style-image: url("https://i.imgur.com/R9KwXWT.png");
}
/* As of June 2021, the CSS spec has not made `::marker` useful yet...
ul.perksList > li::marker {
width: 20px;
}
*/<!DOCTYPE html>
<html lang="en">
<head>
<title>DuckDuckGo</title>
</head>
<body>
<div class="container">
<ul class="perksList">
<li>Private Search</li>
<li>Tracker blocking</li>
<li>Site Encryption</li>
</ul>
</div>
</body>
</html>不幸的是，正如您可能已经注意到的，https://i.imgur.com/R9KwXWT.png图像相当大，但list-style-image属性不允许您直接控制图像大小。
但你可以用::marker伪元素来控制它。。。除了截至2021年6月，CSS规范还不允许::marker特别有用。
这意味着您最好在<li>元素上使用background-image和::before，并完全避免使用display: list-item：
ul.perksList {
display: flex;
justify-content: space-between;
/* Normalize <ul> box: */
margin: 0;
padding: 0;
}
ul.perksList > li {
list-style: none;
margin: 20px;
}
ul.perksList > li::before {
content: '';
display: inline-block;
background-image: url("https://i.imgur.com/R9KwXWT.png");
background-repeat: no-repeat;
background-size: contain;
width: 1em;
height: 1em;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>DuckDuckGo</title>
</head>
<body>
<div class="container">
<ul class="perksList">
<li>Private Search</li>
<li>Tracker blocking</li>
<li>Site Encryption</li>
</ul>
</div>
</body>
</html>同意戴的回答。您需要display: list-item才能使用list-style-image，但这不是控制样式的好方法。
有很多其他方法可以在不使用列表项的情况下在文本之前添加图像，但如果您仍然想使用list-style，为什么不使用表情符号呢。
body {
background:black
}
.perks {
display:list-item;
margin: 20px;
list-style-type: "2705";
color:yellow
}<ul class="perks0">
<li class="perks">Private Search</li>
<li class="perks">Tracker blocking</li>
<li class="perks">Site Encryption </li>
</ul>