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; 

}