简单的 CSS 选项卡 - 需要打破活动选项卡上的边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2802842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple CSS tabs - need to break border on active tab
提问by DisgruntledGoat
I want to create a very simple tab style that looks like this:
我想创建一个非常简单的选项卡样式，如下所示：
_____ _____ _____
_|_____|_| |_|_____|______________
So basically there is a horizontal border on the bounding box that breaks for the active tab. I'm using a basic list, with the following CSS, but the outer border always appears over the individual tabs. I've tried various positioning and z-index as well to no avail.
所以基本上有一个边界框上的水平边框为活动选项卡中断。我使用的是一个基本列表，带有以下 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;
}
采纳答案by ghoppe
Try this solutionby Eric Meyer.
试试Eric Meyer 的这个解决方案。
Content below copied from the site to ensure the answer is still valid if the site closes, changes or breaks.
以下内容是从网站复制的，以确保在网站关闭、更改或中断时答案仍然有效。
#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>ABOUT THE CODE Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.
关于代码 Listamatic 站点中的一些列表必须进行修改，以便它们可以在 Listamatic 的简单列表模型上工作。如有疑问，请先使用外部资源，或者至少比较两种模型，看看哪一种适合您的需求。
回答by Dave Everitt
Changing your existing code as little as possible - try display: inline-blockfor the litags, with the border on a .menucontainer div:
尽可能少地更改现有代码 - 尝试使用带有容器边框display: inline-block的li标签：.menudiv
.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 used to illustrate (added div at bottom to show blending of active tab into div colour):
用于说明的 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">
回答by Ken
.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>