各＆lt; li＆gt;を与えるにはどうすればよいですか独自の弾丸画像？

StackOverflow https://stackoverflow.com/questions/209980

  •  03-07-2019
  •  | 
  •  

質問

試しました

<ul id="contact_list">
    <li id="phone">Local 604-555-5555</li>
    <li id="i18l_phone">Toll-Free 1-800-555-5555</li>
</ul>

with 

#contact_list
{
    list-style: disc none inside;
}

#contact_list #phone
{
    list-style-image: url(images/small_wood_phone.png);
}

#contact_list #i18l_phone
{
    list-style-image: url(images/i18l_wood_phone.png);
}

利用できません。ディスクのみが表示されます。個々のリストアイテムに独自の箇条書きを付ける場合、cssでこれを実現するには、 背景画像を使用せずに 。

編集：firebugが言っていることにもかかわらず、list-style-imageルールが何らかの形でオーバーライドされていることを発見しました。ルールをインライン化すると、次のようになります。

    <li id="phone" style="list-style-image: url(images/small_wood_phone.png);">Local 604-555-5555</li>

その後はすべて順調です。セレクターにulまたはliを含む実行中のテストケースには他のルールがないため、インライン化が異なる結果をもたらす理由はわかりません。

役に立ちましたか？

解決

まず、「癖」があるかどうかを判断します。多くのCSSプロパティでは違いがあるためです。

次に、W3c 指定 URLは二重引用符で囲む必要があります（ただし、引用符も使用しません）。仕様に沿って、将来のトラブルを回避してください。

＆quot; strict＆quot;を指定する場合DOCTYPEでは、ブラウザは標準に従って二重引用符を必要とする場合があります。

他のヒント

これを試してください：

#contact_list li
{
    list-style: none;
}

#contact_list li#phone
{
    list-style-image: url('images/small_wood_phone.png');
}

#contact_list li#i18l_phone
{
    list-style-image: url('images/i18l_wood_phone.png');
}

これがあなたの問題かどうかはわかりませんが、画像への相対リンクを使用しています。 cssで相対リンクを使用する場合、cssファイルに対して相対的ですが、インライン化されている場合は、htmlページに対して相対的になります。

問題は、動作するコードを試したことです。存在しないのは、画像が存在しない場合のみです。たぶん、CSSで指定した画像が実際にフォルダ画像にあるか、つづりが間違っていないかを確認する必要があるかもしれません。

注：firefoxとieの両方で。

CSSでやや異なる方法で行うことをお勧めします-つまり：

#contact_list
{
  list-style: none;
}

#contact_list li {
  padding-left: 20px; /* assumes the icons are 16px */
}

#contact_list #phone
{
  background: url(images/small_wood_phone.png) no-repeat top left;
}

#contact_list #i18l_phone
{
  background: url(images/i18l_wood_phone.png) no-repeat top left;
}

これらの画像があなたが思っている場所にあることを再確認するかもしれません。この例は、画像が欠落していない限り正常に機能します。

私は考えもしなかったでしょう。 URLを引用すると、次のようになります。

#contact_list #phone
{
    list-style-image: url("/images/small_wood_phone.png");
}

動作を開始します。引用符を外して、停止します。それは違いを生むはずがないと思った。

皆さん、ご協力ありがとうございます。

list-style-type：noneを追加してみてください。 ＃contact-list？おそらくlist-style：宣言の代わりです。

提案するのは苦痛ですが、！importantフラグを試しましたか？また、他のブラウザでも同じように動作しますか？これがFirefoxのuserChrome.cssファイルにある場合はどうなりますか？

list-style-imageプロパティの後に！importantを追加してみてください。これにより、オーバーライドされなくなります。

#contact_list
{
    list-style: disc none inside;
}

#contact_list #phone
{
    background-image: url(images/small_wood_phone.png) no-repeat top left;
    padding-left: <image width>px;
}

#contact_list #i18l_phone
{
    background-image: url(images/i18l_wood_phone.png) no-repeat top left;
    padding-left: <image width>px;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top