如何将整个<li>元素设为链接？</li>

Question

所以我有一堆选项卡都在list元素中。我在View中使用Ruby on Rails，所以它看起来像这样：

<div id="top-nav">
    <ul>
        <li> <%= link_to "Home", user_root_path() %> </li>
        <li> <%= link_to "Manage", manage_path() %> </li>
    </ul>
</div>

等等。

如何在CSS中设置样式以便我可以单击文本周围的框以转到该链接，而不必单击文本本身？

我查看了一些答案并尝试使用display：block;在top-nav和li元素中，但它没有工作。

谢谢！

Answer 1

执行以下操作：

 - <li> tag should have ZERO padding
 - <a> tag should have ZERO margin
 - <a> tag should have the actual padding

Answer 2

你在错误的地方有正确的想法。尝试将您的链接设为display:block，例如：

#top-nav a:link {
    display: block;
    /* padding, etc... */
}