zurb-foundation - 如何使用 zurb 基础侧导航来调整内容链接的大小而不是 100% 的容器宽度

Question

我使用基础作为网站设计的基础，并为屏幕一侧开发导航栏。我想使用 Foundation 的侧导航，因为它有分隔线和很好的方法来灰显或将导航链接标记为“活动”。我遇到的问题是链接的可点击区域扩展了容器的宽度，而不是链接的文本内容。我觉得这很令人困惑，我不希望我的用户有这种体验。

Zurb 基金会代码：

<section class="section">
     <ul class="side-nav no_padding_top">
        <h5 >What can I do here?</h5>

        <li class="">
            <a href="#" >View Popular</a>           
        </li>
        <li class="">
            <a href="#" >View Top Rated</a>         
        </li>
        <li class="">
            <a href="#" >Browse Categories</a>          
        </li>
     </ul>
</section>

在下图中，我展示了 zurb 站点导航的呈现方式（底部），可点击区域周围有边框。我想限制链接文本（顶部）周围的点击区域，即。可点击的链接是文本的大小，而不是容器的大小。如何覆盖默认的 zurb 基础行为来做到这一点？

Answer 1

这是因为链接设置为display:block. 覆盖它：

.side-nav li a {
  display: inline-block;
}