HTML <a> tag wider than specified width</a>

Question

http://exfluor.com/productsMain.html

我似乎无法使可点击链接区域的边界保持在<div>的范围内，它正在建立一个链接（11个按钮链接到产品类别）。即使使用类来指定宽度，它也会跨越它所在的<td>的整个宽度。我已经用完了选项。

<a href="bycategory.php?cat=anhydrides">
    <div class="category" align="center">
        Anhydrides<br><img src="images/cat/anhydrides.jpg" alt="">
    </div>
</a>

Answer 1

要设置元素＃39;的宽度，必须显示块或内联块。还要考虑设置溢出：隐藏。

Answer 2

使用块显示：

.catTable a {
    ...
    display: block;
}

Answer 3

将word-wrap: break-word属性添加到a。它会适当地破坏你的链接。你应该注意：你不会从中获得自动连字符。为此，您必须查看某些库，例如hypenator

请将此小提琴视为示例：http://jsfiddle.net/8Lrhr22u/

Answer 4

您的HTML无效。您无法将div放入a（您可以，但它不可靠）。而是尝试稍微改进标记（span而不是div）：

<a href="bycategory.php?cat=hydrofluorocarbons">
    <span class="category" align="center">Hydrofluorocarbons<br>
        <img src="images/cat/hydrofluorocarbons.jpg" alt="">
    </span>
</a>

然而，这并不是必需的，因为将a设置为display: inline-block可以解决问题：

.catTable a {
    display: inline-block;
}