简单的 CSS 选项卡 - 需要在活动选项卡上打破边框答案

【问题标题】：Simple CSS tabs - need to break border on active tab简单的 CSS 选项卡 - 需要在活动选项卡上打破边框
【发布时间】：2010-05-10 13:15:46
【问题描述】：

我想创建一个非常简单的标签样式，如下所示：

  _____   _____   _____
_|_____|_|     |_|_____|______________

所以基本上边界框上有一个水平边框，会中断活动选项卡。我正在使用带有以下 CSS 的基本列表，但外边框始终出现在各个选项卡上。我也尝试了各种定位和 z-index 无济于事。

ul.tabHolder {
    overflow: hidden;
    clear: both;
    margin: 1em 0;
    padding: 0;
    border-bottom: 1px solid #666;
}
ul.tabHolder li {
    list-style: none;
    float: left;
    margin: 0 3px -1px; /* -1 margin to move tab down 1px */
    padding: 3px 8px;
    background-color: #444;
    border: 1px solid #666;
    font-size: 15px;
}
ul.tabHolder li.active {
    background-color: #944;
    border-bottom: 1px solid #944;
}

【问题讨论】：

标签： css tabs

【解决方案1】：

试试 Eric Meyer 的 this solution。

以下内容从网站复制，以确保在网站关闭、更改或中断时答案仍然有效。

#navlist {
  padding: 3px 0;
  margin-left: 0;
  border-bottom: 1px solid #778;
  font: bold 12px Verdana, sans-serif;
}

#navlist li {
  list-style: none;
  margin: 0;
  display: inline;
}

#navlist li a {
  padding: 3px 0.5em;
  margin-left: 3px;
  border: 1px solid #778;
  border-bottom: none;
  background: #DDE;
  text-decoration: none;
}

#navlist li a:link {
  color: #448;
}

#navlist li a:visited {
  color: #667;
}

#navlist li a:hover {
  color: #000;
  background: #AAE;
  border-color: #227;
}

#navlist li a#current {
  background: white;
  border-bottom: 1px solid white;
}

<div id="navcontainer">
  <ul id="navlist">
    <li id="active"><a href="#" id="current">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li><a href="#">Item four</a></li>
    <li><a href="#">Item five</a></li>
  </ul>
</div>

关于代码 Listamatic 站点中的一些列表必须进行修改，以便它们可以在 Listamatic 的简单列表模型上工作。如有疑问，请先使用外部资源，或至少比较两种模型，看看哪一种适合您的需求。

【讨论】：

最后我不必对代码进行大量更改，但这个页面帮助我解决了问题。
我正在努力找出为什么#navlist 边框没有包裹元素，因为css边框总是添加到元素的外部。看来整个技巧是由于font 属性，我不知道如何tf ：jsfiddle.net/p9goxfbu/1。如果您将其删除，或者甚至将font-family 更改为serif，则活动选项卡下方会出现一个边框底部。这绝对不应该是公认的答案

【解决方案2】：

尽可能少地更改现有代码 - 尝试将 display: inline-block 用于 li 标记，并在 .menu 容器 div 上添加边框：

.menu {
    border-bottom: 1px solid #666;
}
ul.tabHolder {
    overflow: hidden;
    margin: 1em 0 -2px;
    padding: 0;
}
ul.tabHolder li {
    list-style: none;
    display: inline-block;
    margin: 0 3px;
    padding: 3px 8px 0;
    background-color: #444;
    border: 1px solid #666;
    font-size: 15px;
}
ul.tabHolder li.active {
    background-color: #944;
    border-bottom-color: #944;
}

用于说明的 HTML（在底部添加了 div 以显示活动选项卡与 div 颜色的混合）：

<div class="menu">
    <ul class="tabHolder">
        <li>Menu 1</li>
        <li class="active">Menu 2</li>
        <li>Menu 3</li>
    </ul>
</div>
<div style="background-color: #944; height: 1em">

【讨论】：

...或 Eric Meyer 的解决方案，正如我在写这篇文章时 ghoppe 发布的那样：-)
如果将ul.tabHolder 上的margin-bottom 设置为-1px 而不是-2px - jsfiddle.net/mrPAE，效果会更好
取决于浏览器 - 在 FF 3.6.3 (OS X) 中，1px 不会隐藏底部边框。 Meyer 的解决方案似乎最干净。
我在阅读本文时突然想到，这些答案的正上方有一个选项卡菜单……css 看起来类似于 Meyer 的选项卡。也许检查这个页面的 css 以获得想法。 :)

【解决方案3】：

.tab {
  display: inline-block;
  background-color: #aaa;
  padding: 4px;
  border: 1px solid #888;
  border-bottom: none;
  
  position: relative;
  bottom:-1px;
  z-index: -1;
}

.tab-body {
  position: relative;
  height: 100px;
  width: 200px;
  padding: 4px;
  background-color: #ccc;
  border: 1px solid #888;
  z-index: 1;
}

.tab.active {
  background-color: #ccc;
  z-index: 2;
}

<div class="tab tab1">Tab 1</div>
<div class="tab tab2 active">Tab 2</div>
<div class="tab tab3">Tab 3</div>

<div class="tab-body">Tab Body</div>

【讨论】：