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。添加 position:relative 是因为除非指定位置，否则 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;

}

CSS - 堆叠边框

CSS - Stacked borders

html

border

overlap