CSS - 堆積邊框

Question

我有這種佈局，需要堆疊在一起的一堆盒子，它們都有一個1px邊框。 爲了使邊框始終爲1px，我將-1px的邊距底部放在所有框中，但是當我更改懸停時的邊框顏色時，它並不像預期的那樣工作。這裏是一個例子：

我怎樣才能讓它在懸停時不重疊？

我的代碼：

.main-content ul li a { 
    margin-bottom:-1px; 
    padding:15px 23px; 
    display:block; 
    border:1px solid #545353; 
    color:#545353; 
} 
.main-content ul li a:hover { 
    border-color:#fff; 
    color:#fff; 
} 

我試圖讓他們所有的z-index，然後做出更高懸停，但它沒有工作，要麼... 任何想法？

謝謝！

編輯添加HTML

<div class="row main-content"> 
    <div class="container"> 
    <div class="col-md-8 col-md-offset-2"> 
     <ul> 
     <li><a href="#">Bienvenida</a></li> 
     <li><a href="#">¿Por qué es la decisión correcta?</a></li> 
     <li><a href="#">¿Cómo funciona este servicio?</a></li> 
     <li><a href="#">¿Cuánto cuesta este servicio?</a></li> 
     <li><a href="#">Estoy interesado, ¿qué hago?</a></li> 
     <li><a href="#">Registro</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

Answer 1

您可以使用屬性：

box-sizing: border-box; 

所以元素正是你想他們是寬度和高度。元素中的邊框將爲1px，而不是伸展到其他元素。

爲了保持邊界在1px的，使用這個CSS：

.main-content ul li a { 
position: relative; 
z-index: 30; 
margin-bottom:-1px; 
padding:15px 23px; 
display:block; 
border:1px solid #545353; 
color:#545353; 
} 
.main-content ul li a:hover { 
border-color:#fff; 
color:#fff; 
z-index: 99; 
} 

我所做的更改了設置的z-index兩個unhovered鏈接和鏈接徘徊。位置：相對被添加，因爲除非指定了位置，否則z-index不會反映。

Answer 2

試試這個https://jsfiddle.net/L565nwaL/1/

<div class="main-content"> 
    <ul> 
     <li><a href="#">item one</a></li> 
     <li><a href="#">item two</a></li> 
     <li><a href="#">item three large</a></li> 
     <li><a href="#">item four</a></li> 
    </ul> 
</div> 

CSS

.main-content ul li a { 
    padding:15px 23px; 
    display:block; 
    border:1px solid #545353; 
    border-bottom: transparent; 
    color:#545353; 
} 
.main-content ul li a:hover { 
    border:1px solid #fff; 
    color:#fff; 

} 

.main-content { 
    background: #161616; 
    box-sizing: border-box; 

}