border-bottom在活動時不會改變

我試圖改變活動按鈕的下邊框爲白色，不知道是否因爲我打電話給兩個不同的邊框底部顏色的div。border-bottom在活動時不會改變

.navigation a { 
    line-height:25px; 
} 

#navigation { 
    border-bottom: 1px solid currentColor; 
    text-decoration: none; 
    word-wrap: break-word; 
    padding-top: 10px; 
    margin-bottom: 15px; 
    overflow: hidden !important; 
    white-space: no-wrap; 
    text-overflow: clip; 
    height: 26px; 
    padding-bottom:26px; 
} 
.navigation a.active-link { 
    border-style: solid; 
    border-bottom: 1px solid white; 
    color: black; 
    padding:10px; 
    display: inline-block; 
} 

<div class="col-xs-12 col-lg-10 col-lg-offset-1"> 
    <div class="navigation" id="navigation"> 
     <a href="/" class="active-link">Show all</a> 
     <a href="#" >title</a> 
    <a href="#" >title1</a> 
    <a href="#" >title2</a> 
    <a href="#" >title3</a> 
    <a href="#" >title4</a> 
    <a href="#" >title5</a> 
    <a href="#" >title6</a> 
    <a href="#" >title7</a> 
    <a href="#" >title8</a> 
    <a href="#" >title9</a> 
    <a href="#" >title10</a> 
    <a href="#" >title11</a> 
    <a href="#" >title12</a> 
    <a href="#" >title13</a> 
    <a href="#" >title14</a> 
    <a href="#" >title15</a> 
    <a href="#" >title16</a> 
    <a href="#" >title17</a> 
    <a href="#" >title18</a> 
    <a href="#" >title19</a> 
    <a href="#" >title20</a> 
    <a href="#" >title21</a> 
    <a href="#" >title22</a> 
    <a href="#" >title23</a> 
    <a href="#" >title24</a> 
    </div>

https://jsfiddle.net/akn5r7y5/7/和我想要做到的是有積極和活躍的沒有看起來像這樣http://imgur.com/a/s0ma3

來源

2016-12-06 nadermx

這是什麼'背景邊框：#red;' – 2016-12-06 21:55:04

很抱歉，我的閱讀障礙必須得到的我 – nadermx

請在[MCVE]在這個問題本身，而不是對第三方的所有相關代碼現場。 –

這裏是你試圖完成什麼調整的CSS。我們將每個鏈接向下移動1px，以覆蓋底線。然後，我們在活動鏈接上設置一個白色背景，以便它僅覆蓋那一行。請參閱下面的小提琴鏈接以獲得最終結果。上述

.navigation a { 
    line-height:26px; 
    padding: 10px; 
    display: inline-block; 
    position: relative; 
    bottom: -1px; 
} 
.navigation a.active-link { 
    border: 1px solid #666; 
    border-top-left-radius: 10px; 
    border-top-right-radius: 10px; 
    border-bottom: 0px; 
    color: #666; 
    background-color: white; 
} 
.container { 
    height: 48px; 
    overflow-y: hidden; 
} 
#navigation { 
    border-bottom: 1px solid #666; 
    height: 48px; 
}

https://jsfiddle.net/akn5r7y5/12/

來源

2016-12-06 21:55:44

，但這打破了我在那裏使用溢出控制的原因。沒有辦法不這樣做呢？正如你注意到文本開始堆棧，如果它被拿出，這是我不想要的功能 – nadermx

刪除填充10px。 – Vcasso

爲什麼其他鏈接無論如何都不會顯示？ –

喬丹是正確的。你也有不必要的CSS聲明。

.navigation a.active-link { 
    ***background-border: #red; 
    border-style: solid;*** 
    border-bottom: solid white; 
    color: black; 
    padding:10px; 
}

你可以像這樣聲明，並刪除邊框顯示的填充。

.navigation a.active-link { 
    border-bottom:9px solid red; 
    color: black; 
}

來源

2016-12-06 22:01:13 Vcasso

這是更接近，但我的目標是有底線不在那裏，你仍然看到在這個例子中的紅色和黑色，如果我改變紅色爲白色，它仍然顯示在黑色 – nadermx

https：// jsfiddle.net/akn5r7y5/10/刪除底線呢？ –

@JordanS猜我沒有澄清，試圖完成這樣的事情http://imgur.com/a/s0ma3 – nadermx

border-bottom在活動時不會改變

回答

相關問題