Css 如何将边框直接定位在带有活动链接的活动链接上？轨道4

我目前正在使用活动链接跟踪导航栏链接状态的更改。当我将样式添加到活动状态时，它看起来如下图所示。我想把活动状态边界推到链接的顶部。Twitter的导航栏是我一直试图实现的风格的一个很好的例子。最后，当一个链接只显示边界活动状态时，似乎导航条的所有状态当前都处于活动状态

HTML

---

我想知道您是否可以对同一链接同时使用active\u link\u to和awesome\u link，因为这两个链接都会生成

a

元素

  <li class="nav-item">
          <%= active_link_to awesome_link 'fa fa-home fa-3x', home_path, :class => 'nav-item nav-link', title: 'Home', style: 'color: white' %>
        </li>

“导航项目导航链接”，标题：“主页”，样式：“颜色：白色”%>

将上述内容替换为

  <li class="nav-item">
          <%= active_link_to '<i class="ffa fa-home fa-3x" style="color:white"></i>', home_path, :class_active => 'nav-link active', :class_inactive => 'nav-link' %>
    </li>

“导航链接处于活动状态”，：class_inactive=>“导航链接”%>

这种方法行不通。链接正在导航列表上输出原始数据。您的意思是

是urlencode吗？也可以看到：新方法非常有效。我需要将标签添加到do块，这样我就可以轻松地使用图标，而无需使用awesome_链接。

 nav a.active {
      border-style: solid;
      border-top: thick solid #27CCC0;
    }

  <li class="nav-item">
          <%= active_link_to awesome_link 'fa fa-home fa-3x', home_path, :class => 'nav-item nav-link', title: 'Home', style: 'color: white' %>
        </li>

  <li class="nav-item">
          <%= active_link_to '<i class="ffa fa-home fa-3x" style="color:white"></i>', home_path, :class_active => 'nav-link active', :class_inactive => 'nav-link' %>
    </li>