如何設置：鏈接高度/寬度與CSS？

這聽起來有點瘋狂，但我不能設置我的導航元素的高度和寬度。如何設置：鏈接高度/寬度與CSS？

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

任何想法我做錯了什麼？

來源

2011-05-13 Lost in OWL

[在A標籤上設置寬度和高度]的可能重複（http://stackoverflow.com/questions/4743254/setting-a-width-and-height-on-an-a-tag） – 2013-12-26 16:40:50

165

add display：block;

a-tag是一個內聯元素，因此您的高度和寬度將被忽略。

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

來源

2011-05-13 09:59:44

+22

塊有副作用，它會在元素後創建一個新行。 – 2011-05-13 10:01:06

+30

將其更改爲顯示：inline-block;解決了這個問題。 – RandomUs1r 2013-05-14 21:59:41

聲望++簡明扼要回答 – cwiggo 2013-10-10 22:51:03

你的問題可能是a元素display: inline本質。您不能設置內聯元素的寬度和高度。

您將不得不在a上設置display: block，但這會帶來其他問題，因爲鏈接的行爲與塊元素相似。最常見的治療方法是給他們float: left，所以他們無論如何排隊。

來源

2011-05-13 09:59:52

浮動它們可能會阻止它們的父元素擴展它們。 – 2011-05-13 10:03:57

@Cobra是的，但這很容易修復。 [在2011年，是否有任何需要clearfix？]（http://stackoverflow.com/q/5565668） – 2011-05-13 10:24:49

因此，我們需要修復這裏的修復？這聽起來不錯。 – 2011-05-13 10:28:03

從definition of height：

適用於：所有元素，但非替換內嵌元素，表中的列，以及列組

一種a元件是，在默認情況下一個內聯元素（和它不被替換）。

您需要更改顯示（直接使用display屬性或間接使用，例如使用float）。

來源

2011-05-13 10:00:02 Quentin

錨需要是一個不同的顯示類型比他們的默認高度。 display:inline-block;或display:block;。

此外，請檢查line-height這可能是有趣的。

來源

2011-05-13 10:00:23

行高也是一個很好的解決方案。但是，當鏈接中的文本超過兩行時，這兩行之間的空白是巨大的。 – 2011-05-13 10:04:15

由於RandomUs 1R對這個觀察結果：

其更改爲顯示：內聯塊;解決了這個問題。 - RandomUs1r 5月14日在'13 21:59

我沒有嘗試過自己了頂部導航菜單欄，如下所示：

首先風格的「禮」元素如下：

display：inline-block;
寬度：7em;
text-align：center;

然後樣式「一」>元素如下：

寬度：100％;

現在導航鏈接的寬度都是相同的，每個鏈接都以文本爲中心。

來源

2014-04-05 04:24:23 user123318

如何設置：鏈接高度/寬度與CSS？

回答

相關問題