如何用自定义图像替换 ul 元素中的项目符号点
[英]How do i replace the bullet points in ul element with custom image
问题描述
我的目标是在ul class="perks0"中放置刻度图像而不是项目符号我已经尝试了几乎所有我可以在网上找到的东西，但似乎没有任何帮助， list-style-image和background-image不起作用。 图像根本没有显示，我不知道是什么问题，我无法在我的代码中发现任何东西。 另外，我认为 display flex and justify content & align-items in.container class 是没用的，因为我有 text-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>
2 个解决方案
解决方案1
0 2021-06-03 18:32:42
当您使用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>元素上使用带有::before的background-image ，并避免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>
解决方案2
0 2021-06-03 19:16:58
同意戴的回答。 您需要display: list-item来使用list-style-image但这不是控制 styles 的好方法。
还有许多其他方法可以在不使用列表项的情况下在文本前添加图像，但如果您仍想使用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>
自定义 html 项目符号点未显示，仅正常项目符号点显示不显示我输入的自定义图像
[英]Custom html bullet points not showing, only normal bullet points show not the custom image i put in
如何修复代码，使项目符号点出现（图像随附的代码）？
[英]How do I fix my code so that the bullet points appear (code provided with image)?
自定义项目符号符号<li>中的元素<ul>这是一个普通字符，而不是图像
[英]Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.