我有一个无序列表,上面附加了一个css类标签,使用CSS附加到该类的每个属性都可以使用,除了“ list-style”属性。(基本上,我正在尝试使用自己的图像来获取项目符号,这通常是一个非常简单的任务,但目前实际上并非如此。
HTML代码:
<ul class="bullets">
<li>The prices abo...</li>
<br>
<br>
<li>The above t...</li>
<br>
<br>
<li>If you wish ...</li>
<br>
<br>
<li>Price is also depe...</li>
<br>
<br>
<li>A white underb...</li>
<br>
<br>
<li>If you w...</li>
</ul>
CSS代码:
ul.bullets li {
font-size:12px;
font-family:"Tw Cen MT";
color:#000000;
list-style:url('../images/bulleta.png');
}
就像我说的那样,CSS类中的每个属性都可以正常工作,除了该list-style:url('bulleta.png');
属性之外,图像都已加载到服务器上,所以不确定为什么它不起作用,我尝试将类附加到ul以及附加到ul的名单。
有人看到我错了吗?谢谢您的帮助
它应该工作正常。看到这个小提琴。确保缩进量ul
足以看到图像(取消注释行即可看到效果)。
CSS:
ul
{
//margin-left:100px;
}
ul.bullets li
{
font-size:12px;
font-family:"Tw Cen MT";
color:#000000;
list-style:url('src');
}
HTML:
<ul class="bullets">
<li>The prices abo...</li>
<br><br>
<li>The above t...</li>
<br><br>
<li>If you wish ...</li>
<br><br>
<li>Price is also depe...</li>
<br><br>
<li>A white underb...</li>
<br><br>
<li>If you w...</li>
</ul>
您可能还需要查看浏览器中的“网络”选项卡(通常会先打开dev工具CTRL SHIFT i),以确保确实在检索图像。
更新
根据您发送的链接,我可以看到正在发生的事情,它media='all'
正在覆盖列表项的显示。
请注意,media=all
显示内容将覆盖列表项。当我取消选择此样式时,将显示您的图像。
作为一个简单的解决方案,您可以添加display:list-item;
到ul.bullets li
。CSS将使用最指定的样式。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句