如何使用zurb foundation side nav调整内容链接而不是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;
}