Css ile a: bağlantı yüksekliği / genişliği nasıl ayarlanır?

86

aGezinme öğelerinin yüksekliğini ve genişliğini ayarlayamıyorum .

#header div#snav div a{
    width:150px;
    height:77px;
}

#header div#snav div a:link{
    width:150px;
    height:77px;
}


#header div#snav div a:hover{
    height:77px;
    background:#eff1de;
}

Neyi yanlış yaptığıma dair bir fikrin var mı?

html css

— Olumlu oy
kaynak

197

ekran ekle: blok;

a-etiketi bir satır içi öğedir, bu nedenle yüksekliğiniz ve genişliğiniz yok sayılır.

#header div#snav div a{
    display:block;
    width:150px;
    height:77px;
}

— Stijn Janssen
kaynak

24

Blok, elemandan sonra yeni bir çizgi oluşturacak yan etkiye sahiptir.

— Cobra_Fast

27

Çapaların bir yükseklik almaları için varsayılan değerlerinden farklı bir görüntüleme türü olması gerekir. display:inline-block;veya display:block;.

Ayrıca line-heightbununla hangisinin ilginç olabileceğini kontrol edin .

— Cobra_Fast
kaynak

4

satır yüksekliği de harika bir çözümdür. Ancak bağlantıdaki metin 2 satırın üzerine çıktığında, bu 2 satır arasındaki boşluk çok büyüktür.

— Stijn Janssen

8

Senin problemin muhtemelen aunsurların display: inlinedoğası gereği. Satır içi öğelerin genişliğini ve yüksekliğini ayarlayamazsınız.

Ayarlamanız display: blockgerekir a, ancak bu başka sorunları da beraberinde getirir, çünkü bağlantılar blok öğeleri gibi davranmaya başlar. Bunun en yaygın tedavisi, onlara float: leftyine de yan yana sıraya girmelerini sağlamaktır.

— Pekka
kaynak

1

Onları yüzdürmek muhtemelen ana öğelerinin etraflarında genişlemesini engelleyecektir.

— Cobra_Fast

@Cobra evet, ama bu kolayca düzeltilebilir. 2011'de, düzeltmeye ihtiyaç var mı?

— Pekka

1

Yani düzeltmeyi burada düzeltmemiz mi gerekiyor? Kulağa pek iyi gelmiyor.

— Cobra_Fast

5

Gönderen yüksekliğinin tanımı :

Şunlar için geçerlidir: değiştirilmemiş satır içi öğeler, tablo sütunları ve sütun grupları hariç tüm öğeler

Bir aöğe, varsayılan olarak bir satır içi öğedir (ve değiştirilmez).

Ekranı değiştirmeniz gerekir (doğrudan display özelliği ile veya dolaylı olarak, örneğin float ile).

— Quentin
kaynak

4

Bu gözlem için RandomUs 1r'ye teşekkürler:

görüntülemek için değiştirme: inline-block; bu sorunu çözer. - RandomUs1r 14 Mayıs 2013 21:59

Bunu bir üst gezinme menü çubuğu için kendim denedim, aşağıdaki gibi:

İlk olarak "li" öğesini aşağıdaki gibi biçimlendirin:

ekran: satır içi blok;
genişlik: 7em;
metin hizalama: merkez;

Ardından "a"> öğesini aşağıdaki gibi biçimlendirin:

genişlik:% 100;

Artık gezinme bağlantılarının tümü eşit genişliktedir ve metin her bağlantıda ortalanır.

— kullanıcı123318
kaynak