كيف يمكنني إعطاء كل <li> رصاصة الخاصة به الصورة ؟

Question

لقد حاولت

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

مع

#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 ، دون استخدام الصور الخلفية.

تحرير :اكتشفت أنه على الرغم من ما الحرائق يقول لي ، list-style-image القاعدة يتم تجاوزها بطريقة أو بأخرى.إذا كنت مضمنة القاعدة مثل ذلك:

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

ثم كل شيء على ما يرام.منذ ليس لدي أي قواعد أخرى في حالة اختبار أنا على التوالي الذي يحتوي على المجاهدين أو لى في محدد, أنا لست متأكدا لماذا inlining يعطي نتيجة مختلفة.

Answer 1

أولا تحديد ما إذا كنت في "المراوغات" واسطة أو لا ، لأن العديد من خصائص CSS يجعل الفرق.

ثانيا, W3c يحدد أن العنوان يجب أن يكون في علامات اقتباس مزدوجة (على الرغم من أنني لا تستخدم علامات الاقتباس ، إما).الذهاب مع المواصفات أن تنقذ نفسك من المتاعب أسفل الخط.

إذا لم يتم تحديد "صارمة" في DOCTYPE ، ثم المتصفح قد تتطلب التنصيص في المعيار.

Answer 2

جرب هذا:

#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');
}

Answer 3

لست متأكدا إذا كان هذا هو مشكلة لكن كنت تستخدم الروابط النسبية إلى الصور الخاصة بك.عند استخدام الارتباطات النسبية في css, نسبة إلى ملف css, ولكن إذا كان المضمنة ، سيكون بالنسبة إلى صفحة html.

Answer 4

الشيء هو أنني جربت الكود هذا يعمل.الوقت الوحيد الذي لا هو إذا كانت الصور ليست موجودة.ربما تحتاج إلى تحقق من أن الصور التي قمت بتحديدها في CSS هي في الواقع في مجلد الصور أو لا تحتوي على أخطاء إملائية.

ملاحظة:في كل من فايرفوكس وإنترنت إكسبلورر.

Answer 5

أود أن أقترح القيام بذلك بشكل مختلف قليلا في 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;
}

Answer 6

قد مضاعفة التحقق من أن تلك الصور هي التي تعتقد أنها هي.هذا المثال يعمل بشكل جيد إلا إذا الصور في عداد المفقودين.

Answer 7

لم أكن قد فكرت.إذا أقتبس عنوان مثل:

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

يبدأ العمل.أنا نهاية الاقتباس و يتوقف.اعتقدت أنه ليس من المفترض أن تحدث فرقا.

شكرا لمساعدتكم جميعا

Answer 8

يمكنك محاولة إضافة قائمة على النمط من نوع:لا شيء ؛ إلى #contact-القائمة ؟ وربما بدلا من القائمة الخاصة بك على غرار:إعلان.

Answer 9

يؤلمني أن تشير إلى ذلك ، ولكن هل جربت !أهمية العلم ؟ كما أنها لا تحسن التصرف في المتصفحات الأخرى ؟ ما إذا كان هذا هو شيء لديك في الخاص بك فايرفوكس userChrome.css الملف ؟

Answer 10

يمكنك محاولة إضافة !المهم بعد list-style-image الملكية التي يمنع تجاوزها.

Answer 11

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