CSS刪除標籤導航菜單上的邊框

我正試圖在CSS中創建一個簡單的標籤式導航菜單。我很難讓底部邊框在活動標籤上消失。通常這不會很難，但我也想要一個行高設置..所以我使用內聯塊與各種IE和FF修復。這使得它顯示我想要的方式，除了底部邊框。CSS刪除標籤導航菜單上的邊框

我嘗試了很多方法來獲得這個工作，包括設置一些操作符..但我不知道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>

來源

2014-04-28 AJ Quick

DEMO

#tab_menu我刪除了overf低：隱藏;

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

到我已經加入這個風格.tab_menu_active，這將增加邊框底部爲白色，而位置操作將overidre灰色邊框的顏色。

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

來源

2014-04-28 18:17:45

好吧。這將做到！我試圖得到一個類似的結果與負利潤率。沒有考慮設置那樣的親戚。（隱藏的溢出是我嘗試的另一件事情的一部分，但沒有解決，所以感謝您將其刪除）。非常感謝！ –

您只需添加相對位置+減去的邊距http://jsfiddle.net/kqu45/4/ –

您的問題是您的整個#tab_menu有一個底部邊框。有幾種方法可以解決這個問題，但首先我會告訴你一些關於如何簡化你的CSS的細節。

給li的類tab，這意味着你擁有的每個標籤都將獲得相同的CSS。在積極的一個，給它第二類，active。在你的css定義中，定義所有tab應該有相同的css（而不是在tab_menu_active和tab_menu_not_active中有重複的css）。

我會建議給他們所有的底部邊框，然後刪除活動的邊框。

這是分叉jsfiddle。

來源

2014-04-28 18:24:05

謝謝。我將至少進行這些更改以減少重複代碼。你的例子的其餘部分並不完全像我需要的那樣工作。有一些舊版瀏覽器不支持的代碼位置，底邊不再延伸屏幕寬度。 –

Ahkay，夠公平的。沒有意識到你需要整個底部邊界。只是沒有任何舊的瀏覽器支持。你確實有一個工作答案，所以我不打擾更新我的答案。本來會做和接下來一樣的事情。 =） –

它沒關係。你實際上教過我一些其他的CSS技巧！ –

CSS刪除標籤導航菜單上的邊框

回答

相關問題