Question

我有一个带标签的菜单，但活动标签不会与background合并，所以它不是真正的标签。如何将border white应用于活动标签，使其看起来与内容背景合并，但不删除内容背景的顶部灰色边框？

主要结构：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="http://getbootstrap.com/examples/starter-template/#">ArqOS Scheduler</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="nodes.html">Nodes</a></li>
        <li  class="active"><a href="tasks.html">Tasks</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

<div class="container-fluid">blabalbla the content</div>

为了更好地理解，请看我的小提琴：

http://jsfiddle.net/La36c/1/
注意：您需要放大宽度，否则您会看到菜单的移动版本！

Answer 1

如果我正确理解您的问题，您可以使用.active:before：

执行此操作

.active:before {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 5px;
    background: #FFFFFF;
}

我为您更新了fiddle

使用CSS将菜单转换为选项卡

1 个答案: