列表样式图像不起作用

我想创建自定义项目符号点，它不工作。列表样式图像不起作用

这是我的HTML。

<div id="services"> 
    <ul id="serviceText"> 
     <h2 id="serviceHeader"><strong>Services I Offer:</strong></h2> 
     <li>Intros</li> 
     <li>Transitions</li> 
     <li>Lower Third Titles</li> 
     <li>Web Page Design</li> 
     <li>and more...</li>       
    </ul> 
</div>

这是我的CSS

ul#serviceText { 
    list-style-image: url(images/checkmark.gif); 
    font-size: 14px; 
    float: right; 
    padding-top: 5px; 
    color: white; 
}

My site is located here xdtrammell.com/lol if it helps you to see all my code.

来源

2012-01-31 Trammell

改变你的选择，以ul#serviceText li。另外请记住，您不能在ul中包含h2元素。是无效的HTML。

来源

2012-01-31 20:59:27 Sotiris

谢谢你那是错的。我知道这很简单。 – Trammell 2012-01-31 21:00:56

与使用list-style-image相比，您可以更好地为列表项目使用CCS背景。您可以更好地控制图形的位置和文本的间距。

请参见：http://preview.moveable.com/JM/ilovelists/

来源

2012-01-31 21:01:11

谢谢我将考虑未来，现在我只需要在那里为我的学校项目。 – Trammell 2012-01-31 21:06:57

具体来说，我认为你想创建的图片大小定制子弹，这里是我会怎么做。

的CSS

.list { 
    margin: 0; 
    padding: 0; 
} 

.list-li { 
    background: url('../directory/your image here.jpg') no-repeat top left; 
    margin: 0; 
    padding: 4px 0 4px 20px; 
    list-style: none; 
}

关键的一点要注意的是背景图像是在左上角，所以考虑到这一点，当你调整你的填充。填充是：顶部，右侧，左侧，底部。

的HTML

<ul class="list"> 
    <li class="list-item">lorem ipsum</li> 
    <li class="list-item">lorem ipsum</li> 
</ul>

我希望这有助于！

来源

2012-01-31 21:10:53 Jim

谢谢你我会开始这样做，但正如我现在对Diodeus说的，我只是需要他们登上我的项目页面。另外你设置它的方式不会使用#list，因为你让它们成为类而不是ID。 – Trammell 2012-01-31 21:15:17

谢谢，我修改了我的答案:-)（它已经有一段时间了） – Jim 2016-09-22 02:07:37

它是否需要图像网址前的../以便它知道要上一个目录？换句话说，您的图片是否存在于顶层目录或下一层目录中？如果没有在顶级存在，那么它需要“../”

来源

2014-02-14 15:33:45 user3310835

只要改变路径，图像文件夹在这样的URL（../images/checkmark.gif）和‘礼’标签元素足够作为选择器。

li {list-style-image: url(../images/checkmark.gif);}

来源

2017-08-13 21:11:16

列表样式图像不起作用

回答

相关问题