web-dev-qa-db-ja.com

シンプルなCSSタブ-アクティブなタブの境界線を破る必要があります

次のような非常にシンプルなタブスタイルを作成したいと思います。

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

したがって、基本的には、アクティブなタブを分割する境界ボックスに水平方向の境界線があります。次の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;
}
csstabs
19
DisgruntledGoat

試してみてください この解決策 エリックマイヤーによって。

サイトが閉鎖、変更、または中断した場合でも回答が有効であることを確認するために、以下のコンテンツをサイトからコピーしました。

#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の単純なリストモデルで機能するように変更する必要がありました。疑わしい場合は、最初に外部リソースを使用するか、少なくとも両方のモデルを比較して、どちらがニーズに合っているかを確認してください。

4
ghoppe

既存のコードをできるだけ変更しないでください-display: inline-blockコンテナliに境界線を付けて、divタグに対して.menuを試してください。

.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">
2
Dave Everitt
.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>
1
Ken