Question

我尝试使用列表中的图像来个性化我的网页。我尝试使用列表样式图像但不是函数。

您可以在页面http://ctp.servizieweb.it/flotta/

看到

我使用此代码：

CSS

/*Lista Flotta */

ul#flotta li
{
list-style-image:url("http://ctp.servizieweb.it/wp-content/uploads/2013/07/freccia.png"); 
}

（我也尝试使用../07/freccia.png作为网址）

MYPAGE

<ul id="flotta">
<li>Augusta 109 (06 pax / 300 k/h)</li>
<li>Augusta 206 (04 pax / 240 k/h)</li>
<li>Robinson R44 (03 pax / 200 k/h)</li>
<li>Robinson R22 (01 pax / 180 k/h)</li>
<li>Cessna (10 pax)</li>
<li>Mercedes serie S</li>
</ul>

但是我无法在列表中看到图像？哪里错了？你能帮我说清楚吗？感谢的

Answer 1

您的列表样式图片正在被隐藏，因为它们被推到容器的左侧。以下是解决此问题的方法：

首先删除article ul li:before。这推动了一切并增加了一个不必要的圈子。

然后更改此CSS行：

article ul li, article ol li {
    line-height: 25px;
    position: relative;
    list-style-image: url('http://ctp.servizieweb.it/wp-content/uploads/2013/07/freccia.png');
    left: 30px;
}

这可能不是您正在寻找的精确风格，但这有助于您了解图像的位置。

Answer 2

CSS选择器似乎有问题：而不是ul#flotta il使用#flotta。由于id根据定义是唯一的，因此无需指定它属于哪种标记。此外，文件路径似乎有问题 - 当我点击链接时，我无法找到图像。此外，习惯上将<style>标记放在文档的<head>标记内，而不是放在<body>中。祝你好运！

列出没有功能的样式图像

2 个答案: