代码之家 › 专栏 › 技术社区 › DisgruntledGoat

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

tabs css

DisgruntledGoat · 技术社区 · 16 年前

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

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

所以基本上,在边界框上有一个水平的边框,它会为活动的选项卡断开。我使用的是一个基本列表和下面的CSS,但是外部边框总是出现在各个选项卡上。我尝试过各种各样的定位和Z索引,但都没用。

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;
}

3 回复 | 直到 16 年前

á´á´á´á´ Êá´á´á´Ê nnnnnn 10 年前

尝试 this solution Eric Meyer。

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

HTML

<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>

CSS

#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;
}

关于代码一些列表必须在列表网站中进行修改,以便他们可以使用列表的简单列表模型。如果有疑问,请首先使用外部资源,或者至少比较两个模型,看看哪一个适合您的需求。

Dave Everitt 16 年前

尽可能少地更改现有代码-尝试 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">

Ken 10 年前

.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>