CSS：鏈路的寬度不通過設置width屬性

改變我有這樣的結構：CSS：鏈路的寬度不通過設置width屬性

<a onclick="toggle_media_box(); return false;" href="#" class="media_link"> 
    <div id="media_link" class="media_link"></div> 
</a><br /> 

#media_link { 
    background-image: url("/images/media.png"); 
} 

.media_link { 
    width: 445px; 
    height: 200px; 
}

圖片的大小爲445px（但620px）。像這樣的所有其他鏈接的大小爲620px。

在IE中一切正常，鏈接是445px的大小。但在Firefox和Chrome中，鏈接仍然是620px寬。該div有正確的大小445px。

怎麼辦？ <a>標籤必須具有445px的大小。

有趣的是，鏈接懸停到445px的大小，但可以點擊到620px的大小。

你的Joern。

來源

2011-06-29 Joern Akkermann

您的HTML無效開頭。錨內不能有div。內聯級別元素不能包含塊級別元素。 –

然後<a>標記是一個內聯元素。因此它的寬度取決於標籤內文本的長度。要解決此問題，您可以將display:block;添加到您的.media_link課程中，並且它將按預期執行。

來源

2011-06-29 15:03:48 Jrod

yeeeehaaaaw！就是這樣，它讓我感到沮喪。十分感謝！ –

您在a需要float: left或display: block或（理想）display: inline-block：

.media_link { 
    display: inline-block 
}

你的class="media_link"使用兩次，#media_link是混亂的。使用<br />不是必需的 - 您可以用display: block替換它。

我建議改變這個：http://jsfiddle.net/Yg4YN/2/

<a onclick="toggle_media_box(); return false;" href="#" class="media_link"> 
    <span class="media_span"></span> 
</a> 

.media_link, .media_span { 
    display: block; 
    width: 445px; 
    height: 200px; 
} 
.media_span { 
    background-image: url("/images/media.png"); 
}

來源

2011-06-29 15:04:35 thirtydot

你的HTML代碼是目前無效的，你應該把錨<a>的<div>內，而不是周圍的其他方式。

一旦你有了正確的HTML，你可以設置你的錨點爲display:block並根據需要調整它的大小。

來源

2011-06-29 15:05:17

該div用於顯示可以放大的圖像 –

您是否真的需要該div？你究竟在做什麼，你不能用錨？ –

它是一個鏈接/錨點附近的正常和懸停的背景圖像。 –

CSS：鏈路的寬度不通過設置width屬性

回答

相關問題