列表样式图像不起作用

Question

I am trying to create custom bullet points and it is not working.

This is my 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>

This is my 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.

Answer 1

change your selector to ul#serviceText li . Also keep in mind that you can't include h2 element in ul . Is not valid html.

Answer 2

Specifically I think you're trying to create custom bullets that are images, here is how I would do it.

The 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;
}

The key thing to note is the background image is in the top left, so take that into consideration when you adjust your padding. Padding is: Top, Right, Left, Bottom.

The HTML

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

I hope this helps!

Answer 3

You're far better of using a CCS background for your list items than using list-style-image . You get far greater control over the positioning of the graphic and the spacing of the text.

See: http://preview.moveable.com/JM/ilovelists/

Answer 4

Does it need the ../ before the image URL so it knows to go up a directory? In other words, does your image exist in the top level directory or in one of the next-levels? If it doesn't exist in the top level then it needs "../"

Answer 5

只需像这样更改 URL 中图像文件夹的路径（ ../images/checkmark.gif），“li ”标签元素就足以作为选择器。

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

Answer 6

我的情况是，当list-style: inside未设置时，项目符号被隐藏或不可见。