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。位置：相对被添加，因为除非指定了位置，否则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;

}