Простые 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

Попробуйте это решение от Эрика Мейера.

Содержимое ниже скопировано с сайта, чтобы гарантировать, что ответ остается в силе, даже если сайт закрывается, изменяется или ломается.

#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.В случае сомнений сначала используйте внешний ресурс или хотя бы сравните обе модели, чтобы определить, какая из них соответствует вашим потребностям.

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

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