CSS：设置链接宽度属性无法改变链接的宽度

Question

我有这个结构：

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

图片的尺寸为445像素（但实际为620像素）。所有类似的链接都是620像素。

在IE浏览器中一切正常，链接大小为445像素。但在Firefox和Chrome中，链接仍然是620像素宽。div的大小为445像素。

怎么办？必须将标签的大小设置为445像素。

有趣的是，链接的悬停大小为445像素，但可点击区域却达到了620像素。

您的Joern。

- Joern Akkermann

---

你的HTML标记起始就是无效的。你不能在锚点内部放置div元素。行内级别的元素不能包含块级别的元素。 - Jamie Dixon

Answer 1

那么，<a> 标签是一个内联元素。因此，它的宽度由标签内文本的长度决定。要解决这个问题，您可以在 .media_link 类中添加 display:block;，然后它将按照预期进行。

- Jared

---

耶嘿！就是这样，这让我感到很沮丧。非常感谢！ - Joern Akkermann

Answer 2

您需要在 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");
}

- thirtydot

Answer 3

你的HTML代码目前无效，你应该将锚点<a>放在<div>内部而不是相反。

一旦你把HTML代码正确排列，你可以将锚点设置为display:block并根据需要调整大小。

- Jamie Dixon

---

div 用于显示一个可以悬停的图片。 - Joern Akkermann

你真的需要这个div吗？你用它做什么，使用anchor不能实现的功能？ - Jamie Dixon

这是一个链接/锚点，围绕着一个带有正常和悬停背景图像的div。 - Joern Akkermann

如果您需要在锚点内部放置一个容器，我建议您使用span而不是div。目前您的HTML无效。 - Jamie Dixon