我大部分时间都在我的网站上工作,遇到了一个问题,我希望从我的无序列表中删除标准项目符号并添加图像。我添加了一个图像,但标准项目符号仍然存在并且图像很大,所以我想知道如何调整图像大小并删除标准项目符号点。
我已经在互联网上研究了解决方案,甚至在这个网站上,似乎没有任何效果
.HTML
<div class="rank-info">
<h4>Available Ranks</h4>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
</div>
.CSS
.rank-info {
padding: 0 0 2em;
}
.rank-info h4{
color:#626262;
font-size:1.4em;
font-family: 'Montserrat Alternates', sans-serif;
margin: 0 0 0.3em;
}
.rank-info p a{
text-decoration:none;
color: #9A9898;
}
.rank-info p a:hover{
color: #ff0000;
}
.rank-info ul{
color: #9A9898;
margin-left: 25px;
list-style-image: url(../images/580b585b2edbce24c47b291a.png);
}
.rank-info li:before {
content:"·";
font-size:100px;
vertical-align:middle;
line-height:20px;
}
这是我的问题的屏幕截图:
截图
比你提前和任何帮助赞赏
调整你的图像大小,它太大了,其次,把图像放在你的 li 上而不是在 UL 上......检查此代码:
ul.no_bullet {
list-style-type: none;
padding: 0;
margin: 0;
}
li.star {
background: url('https://media.giphy.com/media/vD7NwwgTXO2YM/giphy.gif') no-repeat
left top;
background-size: 15px;
height: 15px;
padding-left: 20px;
padding-top: 3px;
}
https://jsfiddle.net/u1em6xfn/1/
要摆脱项目符号点,请尝试使用
list-style-type: none;
只需将其放入 li 或 ul 选择器即可。
要调整图像大小,我只会使用 html 标签而不是使用 css 插入图像。这样,您可以在 html 标记中调整图像的大小。
<li>
<image src="../images/580b585b2edbce24c47b291a.png" alt="red star" width="yourWidth" height="yourHeight"</image>
</li>