sınıfına bağlı bir span etiketi üzerinde sağa soldan mutlak konumunu değiştirmek

3 Cevap php

This is my first question here but I'm sure there are many more to come. I have a small position problem that I would like to know if it's even possible to achieve.

Ben bir Sırasız liste (<ul>) ile olan i bu sol şamandıra ana seçenekleri için, <li> s süzülüyor ve temas ve destek seçenekleri için ben çok iyi şimdiye kadar, onları sağ şamandıra . Şimdi ben bir <span> Her içeride <li> hangi i yatay listenin altında gösterilecek olan, liste bir menü içindir. Şüpheli olarak menü seçim açıklaması olarak ve ben kullanmak normal seçenekler için bu <span> eserleri position:absolute; top:30px; left:0; bu işleri. Şimdi pozisyon i yayılma position:absolute; top:30px; right:0; gets sağ böylece yüzer ve bu hiç çalışmıyor olanlar için menü öğeleri niteliklerini değiştirmek istiyorum. Daha sonra diğer daha özel bir css kuralı ile bunu değiştirmek imkansız gibi görünüyor, ama şamandıra harika çalışıyor.

html:

<div id="menu">
<ul>
    <li>Menu1<span>Info1</span></li>
    <li>Menu2<span>Info2</span></li>
    <li class="support">Support1<span>Info3</span></li>
</ul>

Css:

#menu{position:relative;}
#menu ul{list-style:none;}
#menu ul li{float:left;}
#menu ul li.support{float:right;}
#menu ul li span{display:none;}
#menu ul li:hover span{display:block; position:absolute; top:30px; left:0;}
#menu ul li.support:hover span{display:block; position:absolute; top:30px; right:0}

The last line in the css make no difference! If anyone has an answer or a work around I greatly appreciate the help.

Soru cevap ve problem çözüldü. James Arons veya merkator mesajları kontrol edin.

3 Cevap

Hatta size left:0 hala miras ediliyor, right:0 set düşündüm. Sen left:auto support sınıfı için bu stili geçersiz kılmak için ayarlamanız gerekir.

Bu CSS bakılırsa, doğru CSS anlamak için görünmüyor, ya da en azından doğru bir şekilde kullanmıyorsunuz. Sen iyi bir tanıtım için the cascade, specificity and inheritance hakkında SitePoint makaleyi okumak isteyebilirsiniz.

Bu CSS son two hatları support sınıfı ile liste öğeleri için geçerli, çünkü çalışmıyor nedenidir. Ikinci-to-son satırı all liste öğeleri için geçerlidir ve son satırı ardından support liste öğeleri için o ekler. Yani, bu son satırda hiç left özellik var bu yana, aşağı önceki satırda, yapmaktan left özelliği çağlayanlar o left: 0 too .

Eğer özel bir durum işaretlemek için bir sınıfını kullanarak olduğunuzda, genel durumda tüm CSS tekrarlayarak, ama sadece bunu değiştirmek için gerekli CSS temin edilmemelidir:

#menu ul li:hover span {display:block; position:absolute; top:30px; left:0;}
#menu ul li.support:hover span {left:auto; right:0;}

Bu CSS anlamına gelecektir support-sınıf listesi öğeleri diğer liste öğeleri olsun tüm CSS olsun, ama left özellik sıfırlama ile varsayılan ve right özelliği yerine ayarlayın.

Garip Hmm. Kod çalışmıyor neden destek beri çalışması gerektiğini, size anlatamam: hover süresi daha özel bir seçici olduğunu.

Found a fix though: Position absolute elements got left: 0; by default. If you remove left: 0; from the span selector it will work.

Kodunuzu aşağıdaki gibi görünecektir:

#menu{position:relative;}
#menu ul{list-style:none;}
#menu ul li{float:left;}
#menu ul li.support{float:right;}
#menu ul li span{display:none;}
#menu ul li:hover span{display:block; position:absolute; top:30px;}
#menu ul li.support:hover span{display:block; position:absolute; top:30px; right:0}

etiketler