Question

我试图在CSS中创建一个简单的标签式导航菜单。我很难让底部边框在活动标签上消失。通常情况下这并不难，但我也想要一个行高设置..所以我使用内联块与各种IE和FF修复。这使它以我想要的方式显示，但下边框除外。

我已经尝试了很多方法来实现这一点，包括设置一些操作符..但我不太了解CSS以确定我是否正确使用它们。

这是我的jsfiddle。

（显然我的CSS技能需要工作，我也可以大大简化代码。）

代码：

#tab_menu {
width: 100%;
overflow: hidden;
color: #000000;
border-bottom: #dddddd solid 1px;
}
#tab_menu ul {
padding: 0px;
margin: 0px;
}
#tab_menu li {
list-style: none;
line-height: 42px;
padding-left: 15px;
padding-right: 15px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
display: -moz-inline-stack;
/* Firefox Fix */
display: inline-block;
/* Normal Function */
zoom: 1;
/* IE Fix */
*display: inline;
/* IE Fix */
}
.tab_menu_active {
color: #000000;
border-bottom: none;
border-left: #dddddd solid 1px;
border-right: #dddddd solid 1px;
border-top: #dddddd solid 1px;
}
.tab_menu_active a {
color: #000000;
text-decoration: none;
}
.tab_menu_not_active {
}
.tab_menu_not_active a {
color:#52a4d4;
text-decoration: none;
}
.tab_menu_not_active:hover {
background: #eeeeee;
}

HTML：

<div id="tab_menu">
<ul>
    <li class="tab_menu_not_active">    <a href="">Link 1</a>

    </li>
    <li class="tab_menu_active">    <a href="">Link 2</a>

    </li>
    <li class="tab_menu_not_active">    <a href="">Link 3</a>

    </li>
    <li class="tab_menu_not_active">    <a href="">Link 4</a>

    </li>
    <li class="tab_menu_not_active">    <a href="">Link 5</a>

    </li>
</ul>
</div>

Answer 1

DEMO

对于#tab_menu我删除了 overflow：hidden;

#tab_menu {   
    /*overflow: hidden;*/
}

到.tab_menu_active我添加了这个样式，这将添加边框底部白色和位置操作将覆盖灰色边框颜色。

.tab_menu_active {   
    border-bottom:solid 1px #fff;
    position:relative; 
    top:1px;
}
.tab_menu_active a {   
    position:relative;
    top:-1px;
}

Answer 2

您遇到的问题是整个#tab_menu有一个底部边框。有几种方法可以解决这个问题，但首先我会向您提供有关如何简化CSS的详细信息。

授予li类tab，这意味着您拥有的每个标签都将获得相同的CSS。在活动的一个上，给它第二个类active。在您的css定义中，定义所有tab应该具有相同的css（而不是tab_menu_active和tab_menu_not_active中的重复css）。

我建议给它们底部的所有边框，然后删除活动边框中的边框。

这是一个分叉的jsfiddle。

CSS在选项卡式导航菜单上删除边框

2 个答案: