较大可点击区域内的链接

想象一下常见的场景，一个包含水平菜单的大标题。您希望整个标题区域都可点击作为“主页”按钮，但显然您也需要菜单项可点击。

让我们以这种超级标准的方式编写此 HTML

<ul id="header">
   <li><a href="#">Menu Item</a></li>
   <li><a href="#">Menu Item</a></li>
   <li><a href="#">Menu Item</a></li>
   <li><a href="#">Menu Item</a></li>
</ul>

由于无序列表具有唯一的 ID，并且本质上是块级元素，因此我们可以将其拉伸到所需的任何形状，并应用背景图像来创建我们的标题。

ul#header {
   height: 238px;
   width: 780px;
   background: url(images/header.jpg) no-repeat;
   list-style-type: none;	
}

为了将菜单项推到菜单底部，为列表项应用顶部边距比为无序列表应用填充更安全（愚蠢的 IE 盒模型问题）。

ul#header li a {
   display: block;
   margin-top: 168px;
   width: 130px;
   height: 40px;
   background-color: red;
   color: white;
}

使整个标题可点击的技巧是，在列表元素中添加一个简单的 Javascript。

<ul id="header" onclick="location.href='index.php';" style="cursor: pointer;">
   ...
</ul>

关于位置的部分显然是使其成为链接的原因，并且那里的内联样式是为了确保光标更改为指针，以便用户知道它是一个链接。这也可以移动到 CSS 中……

就是这样。非常简单的技巧，但我认为我应该分享一下，因为我发现自己一直在这样做，并且它是标题/菜单问题的非常好的语义解决方案。

Jerry Nummi 发布了一条评论，其中包含他针对此相同问题使用 CSS 解决方案完成的示例。感谢 Jerry！ 链接失效。