html - 上部的底部 div 对齐问题在悬停时有边框

Question

在悬停下方 div 对齐时添加边框属性时出现的问题是扭曲的。我知道这是因为它增加了悬停的 div 的高度。有什么解决办法吗。

盒子的高度取决于里面的内容，所以我们无法修复它。 fiddle

.col {
  width: 20%;
  padding: 10px;
  float: left;
  box-sizing: border-box
}

.col:hover {
  border: solid 1px red
}

<div>
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
  <div class="col">7</div>
  <div class="col">8</div>
</div>

编辑

我已将悬停属性添加到最顶层的父 div，这为所有 div 添加了透明边框。这解决了这个问题，但它似乎不是好方法，因为用户可以在悬停时看到移动的东西

Answer 1

别担心

很简单，你可以使用outline:1px solid red;insted of border

那是因为，你给了每列 20% 的宽度，屏幕上总共可以容纳 5 个 div。悬停后，您将添加边框。它将增加宽度 20%+ 边框宽度。因为你遇到了这个问题。

参见 fiddle 链接 https://jsfiddle.net/nmxzzvk5/7/