如何在CSS中將子元素的邊框繪製到父元素之外（或模擬此效果）？

我不是CSS方面的專家，並且試圖定製bootstrap的導航欄。有一個父元素，裏面有一些鏈接。期望的效果 - 活動鏈接在其父容器（粗黑線）下方顯示選擇高亮顯示。當我嘗試在活動鏈接上繪製底部邊框時，它將擴展父元素的總高度，並且邊框仍然在其中繪製。如何實現？如何在CSS中將子元素的邊框繪製到父元素之外（或模擬此效果）？

.navbar-inverse .navbar-nav > li > a { 
border-bottom: 4px solid #000; 
}

來源

2014-02-21 CSS Guru

這可能已經完成了一些高度和邊距/填充設置。 – GroundZero

'：之後？你可以做一個小提琴嗎？ – Mooseman

@GroundZero也嘗試過，無法讓它工作。邊框總是在父母的內部。 –

你可以使用一個box-shadow，例如

.navbar-inverse .navbar-nav > li > a { 
    box-shadow: 0 4px 0 #000; 
}

的箱陰影（帶-moz-和-webkit-前綴必要時）施加到元件不會延伸的元件本身的大小，因此它的父元素將不能生長。

見這個例子上codepen：http://codepen.io/anon/pen/eHxGz（並注意span元素的邊框）

來源

2014-02-21 13:46:56 fcalderan

非常棒，Fabrizio，非常感謝你！ –

請注意，你需要添加一個'-ms-filter'來支持IE8和更低版本 – LGSon

我不知道你在找什麼，但是這可能是鼓舞人心的。

您可以使用:after僞元素創建水平線（邊界的種類）並將其定位爲absolute而列表項定位爲relative。（作爲一個參考點的絕對定位的元素）

li { 
    min-height: 50px; 
    position: relative; 
} 

li > a.active:after { 
    content: ''; 
    position: absolute; 
    left: 0; 
    bottom: -4px; 
    width: 100%; 
    height: 4px; 
    background-color: orange; 
}

HTML

<ul> 
    <li><a href="" class="active">link #1</a></li> 
    <li><a href="">link #2</a></li> 
    <li><a href="">link #3</a></li> 
</ul>

WORKING DEMO

來源

2014-02-21 13:47:05

+1我剛剛檢查過你的演示，因爲它看到它需要你添加的「減」像素:) ..一個很好的解決方案，因爲它保持流和IE8支持 – LGSon

使用「覆蓋」

一樣！在你的CSS重要的是，一個小提琴的例子：

http://jsfiddle.net/83y27/5/

.parent { 
width: 310px; 
height: 650px; 
background: red ; 
background-size:cover; 
} 

.child { 
     position:relative; 
     width:700px !important; 
     height:512px; 
     background: blue !important; 
     top:60px; 
     bottom:65px; 
     left:23px; 
     right:24px; 
     }

來源

2014-02-21 13:48:43 STP38

另一種方式可能是「推」你的鏈接跳出流程（和他們的父母外...）

position: relative; 
top: 4px;

如果父母有一個固定的高度它應該工作並沒有overflow: hidden

來源

2014-02-21 13:57:24 LGSon

如何在CSS中將子元素的邊框繪製到父元素之外（或模擬此效果）？

回答

相關問題