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

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

  •  15
  • DisgruntledGoat  · 技术社区  · 15 年前

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

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

    所以基本上,在边界框上有一个水平的边框,它会为活动的选项卡断开。我使用的是一个基本列表和下面的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 回复  |  直到 15 年前
        1
  •  4
  •   ᴍᴀᴛᴛ ʙᴀᴋᴇʀ nnnnnn    9 年前

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

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

        2
  •  2
  •   Dave Everitt    15 年前

    尽可能少地更改现有代码-尝试 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">
    
        3
  •  1
  •   Ken    9 年前

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