我想创建一个非常简单的选项卡样式,如下所示：
_____ _____ _____ _|_____|_| |_|_____|______________
因此,在边界框上基本上有一个水平边框,为活动选项卡中断.我正在使用一个基本列表,使用以下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;
}
解决方法
尝试
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;
}
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.
