对于较大的可点击区域,如何将<a>标记设置为其父<li>标记的大小？

Question

我想这样做,以便标签上的可点击区域的大小LI.

我的HTML看起来像:

<li>
 <a href="#">Link</a>
</li>

Answer 1

正如其他人所说

li a { display: block; }

应该实现你所追求的目标.但您还必须从<li>中删除任何填充,并将其设置在<a>上.例如:

li { padding: 0; }
  li a { display: block; padding: 1em; }

Answer 2

在CSS中:

li a {
     display: block;
}

当然,你会想让你的选择器更具体.

<ul>
    <li class="myClass">
        <a href="#">Link</a>
    </li>
</ul>

li.myClass a {
    display: block;
    background-color: #fdd; /* Demo only */
}

http://jsfiddle.net/userdude/jmj2k/

Answer 3

这将使整个区域可以点击.

li a { display: block; }