锚定在整个元素的矩形中

Question

我有一个由以下标记创建的列表

<ul class="menu">
    <li><a href="#">Bucuresti</a></li>
    <li><a href="#">Sighisoara</a></li>
    <li><a href="#">Tuzla</a></li>
    <li><a href="#">Comorova-Neptun</a></li>
    <li><a href="#">Maramures</a></li>
    <li><a href="#">Sinaia</a></li>
</ul>

我的问题是锚点只对a标记创建的边界矩形有效，如下所示：

我希望拥有整个li代码的锚点。在过去，我一直将li放在锚标记（<a href="#"><li>Bucuresti</li></a>）中，但有人告诉我这是错误的。如果不强制使用HTML语法，我还能做些什么来获得我想要的效果？

Answer 1

默认情况下，链接（<a>）为inline elements，因此它们会占用其内容的宽度。通过将它们设置为block level而不是ul.menu a {display:block;}，默认情况下它们会占用其包含元素的整个宽度，您可以让它们扩展它们的高度。

Answer 2

你有一些CSS可以强制你的<li>元素成为你想要的大小和形状。通过将该样式应用于<a>元素而不是<li>元素，您很可能完成同样的事情。

jsfiddle.net/92KKa

Answer 3

将此样式添加到锚标记。

a{
  display:block;
}

锚标记是一个内联元素，因此应该使其成为占用整个空间的块。