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属性

回答

相关问题