CSS ekran: list-style-görüntü ile inline özelliği: <li> etiketleri üzerinde mülkiyet

oy
17

Ben BB'nin kullanarak sorun yaşıyorum display:inlineile mülkiyet list-style-image:üzerinde mülkiyet <li>etiketleri. Temelde, çıkış aşağıdaki istiyorum:

* Link 1  * Link 2

burada *bir görüntüsünü temsil eder.

Ben aşağıdaki HTML biraz yapıyorum:

<ol class=widgets>
    <li class=l1>Link 1</li>
    <li class=l2>Link 2</li>
</ol>

hangi CSS aşağıdaki bit ile tarz olduğunu:

ol.widgets { list-style-type:none; }

ol.widgets li { display:inline;
                margin-left:10px; }

ol.widgets li.l1 { list-style-image:url(image1.gif); }

ol.widgets li.l2 { list-style-image:url(image2.gif); }

Sorun liste öğeleri satır içi görüntülendiğinde, liste öğeleri ile ilişkili görüntüleri görünmüyor olmasıdır. Onlar do I çıkar eğer görünür display:inlinemülk <li>etiketi.

görüntüleri Liste öğeleri satır içi görüntülenen veya bu sadece imkansız bile görünmesi için bir yol var mı?

Oluştur 09/12/2008 saat 22:25
kaynak kullanıcı
Diğer dillerde...                            


6 cevaplar

oy
32

Kullanmayı deneyin float: left(veya right) yerine display: inline. Satır içi ekran madde işaretleri ekler şeydir liste maddelik ekran, yerini alır.

Cevap 09/12/2008 saat 22:30
kaynak kullanıcı

oy
5

Sen liste öğeleri yan yana sıraya istiyorum, ama gerçekten satır içi öğeler olmak. Bunun yerine onları yüzer:

ol.widgets li { 
    float: left;
    margin-left: 10px;
}
Cevap 09/12/2008 saat 22:33
kaynak kullanıcı

oy
4

Ben benzer bir sorun, ben css çözebilir vardı ": önce" .. kod sever bu görünür:

.widgets li:before{
    content:"• ";
}
Cevap 10/07/2013 saat 16:02
kaynak kullanıcı

oy
2

Sonra böyle kullanmak birbirlerine şamandıra ile stil görüntü ve Nav istiyorum

ol.widgets ul
{
list-style-image:url('some-img.gif');
}
ol.widgets ul li
{
float:left;
}
Cevap 05/07/2012 saat 12:43
kaynak kullanıcı

oy
2

Eğer bakarsak display niteliği CSS spec, sen 'liste maddelik' özellikle bir görüntüleme türü olduğunu göreceksiniz. Eğer "satır içi" bir öğe ayarladığınızda, liste öğesi varsayılan ekran türünü değiştiriyoruz ve işaretleyici özellikle liste maddelik tip bir parçasıdır .

Yukarıdaki cevap şamandıra önerir, ancak bunu denedim ve (en azından Chrome'da) çalışmıyor. Spec göre , sola veya sağa, yüzer senin kutularını ayarlarsanız "Değer none 'olmadıkça, display', yok sayılır." Ben en kısa sürede eleman yüzer gibi list-item 'varsayılan ekran tipi (onunla işaretleyici alarak) gitti anlamına götür.

Düzenleme: Evet, ben yanılmışım. Üst girişine bakın. :)

Cevap 09/12/2008 saat 22:38
kaynak kullanıcı

oy
1

Ben kullanmamayı öneririm list-style-imageo farklı tarayıcılarda oldukça farklı özellikle görüntü pozisyonunu davranır gibi

Bunun yerine, böyle bir şey kullanabilirsiniz

ol.widgets,
ol.widgets li { list-style: none; }
ol.widgets li { padding-left: 20px; backgroud: transparent ("image") no-repeat x y; }

tüm tarayıcılarda çalışır ve size farklı tarayıcılarda aynı sonucu verecektir.

Cevap 09/12/2008 saat 22:44
kaynak kullanıcı

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more