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

Question

我想创建一个非常简单的选项卡样式,如下所示:

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

所以基本上边界框上有一个水平边框,它为活动标签打破.我正在使用基本列表,使用以下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;
}

Answer 1

尝试使用Eric Meyer的此解决方案。

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

#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的简单列表模型上使用。如有疑问，请首先使用外部资源，或者至少比较两个模型以查看哪种模型适合您的需求。