list-style-imageが機能していません

Question

カスタムの箇条書きを作成しようとしていますが、機能しません。

これは私の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> 

これは

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

変更私のCSS ul#serviceText liにあなたのセレクタです。 ulにはh2要素を含めることはできません。有効なhtmlではありません。

Answer 2

list-style-imageを使用するよりも、リスト項目にCCSの背景を使用する方がはるかに優れています。グラフィックの配置とテキストの間隔をはるかにコントロールできます。

参照：http://preview.moveable.com/JM/ilovelists/

Answer 3

具体的に、私はあなたがイメージされているカスタム箇条書きを作成しようとしていると思うが、ここで私はそれを行うだろうかです。

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> 

私はこれが役に立てば幸い！

Answer 4

イメージURLの前に../が必要なので、ディレクトリを上がることがわかりますか？言い換えれば、あなたのイメージはトップレベルのディレクトリに存在するのか、次のレベルの1つに存在しますか？それはトップレベルに存在しない場合、それは

Answer 5

はちょうどこのようなURL（ ../images/checkmark.gif ）と『LI』の画像フォルダへのパスを変更するには、「../」必要がありますタグ要素で十分です。

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