css 如何调整列表样式图像

2skhul33  于 12个月前  发布在  其他
关注(0)|答案(3)|浏览(109)

我一直在我的网站上工作了一天的大部分时间,我遇到了一个问题,我想从我的无序列表中删除标准的项目符号,并添加一个图像,而不是。我已经添加了一个图像,但标准的项目符号仍然存在,图像是巨大的,所以我想知道我如何调整图像的大小,并删除标准的项目符号。
我已经研究了互联网的解决方案,甚至在这个网站上,似乎没有什么工作
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;
}


以下是我的问题的截图:
Screenshot
感谢你的帮助

9avjhtql

9avjhtql1#

你需要调整你的形象,它的方式太大,其次,把你的形象在你的李不是在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/

yacmzcpb

yacmzcpb2#

为了摆脱要点,尝试使用

list-style-type: none;

字符串
只需将其放入li或ul选择器。
为了调整图片的大小,我会使用html标签而不是使用css插入图片。这样你就可以在html标签中调整图片的大小。

<li>
<image src="../images/580b585b2edbce24c47b291a.png" alt="red star" width="yourWidth" height="yourHeight"</image>
</li>

mm5n2pyu

mm5n2pyu3#

ul {
  list-style-type: none;
}

个字符

相关问题