Question

我有一个inline-block元素的列表，我想为你悬停的元素添加一个边框。但是，请注意边框如何偏移元素，即使我使用box-sizing: border-box并明确定义元素的宽度和高度。我举例说明了以下行为：

＆＃13;

* { box-sizing: border-box }

ul { font-size: 0 }

li {
  display: inline-block;
  width: 100px; height: 40px; margin: 10px;
  font-size: 20px; text-align: center;
  background-color: #FFF176;
}

li:hover { border: 5px dashed grey }

＆＃13;

<ul>
  <li>hover</li>
  <li>over</li>
  <li>me!</li>
</ul>

＆＃13;

我找到的最佳解决方案是使用outline和outline-offset代替border，但我真的很想知道为什么我原来的方法不起作用：/

更新：虽然BoltClock提供了一个非常好的解释和建议（这就是我要求的），但我只是想提一下我完全忘记了flexbox，这解决了漂亮我使用内联元素的所有问题。我将它与BoltClock的final JSFiddle solution

的透明边框技巧相结合

Answer 1

我现在看到了问题。发生的事情是box-sizing: border-box导致每个元素的内容框在添加边框后水平和垂直缩小。因为元素是内联块，所以垂直收缩会影响悬停元素的基线，从而影响其所在线的基线，从而导致同一条线上的其他元素偏移。如果你仔细观察，你会注意到文本实际上保持对齐，这是抵消元素的目标。

将边框更改为轮廓是有效的，因为轮廓被设计为对布局没有影响（并且还因为您将边框完全取出图片）。

但是，正是由于这个原因，以这种方式使用轮廓会产生与原始边框效果明显不同的效果。设置初始透明边框而不是轮廓将确保您的内容保持偏移正确的数量，无论边框是否在背景中可见（这在前一个答案中显示，但它被删除，大概是因为它被downvoted）：

* { box-sizing: border-box }

ul { font-size: 0 }

li {
  display: inline-block;
  width: 100px; height: 40px; margin: 10px;
  font-size: 20px; text-align: center;
  background-color: #FFF176;
  border: 5px dashed transparent;
}

li:hover { border-color: grey }

<ul>
  <li>hover</li>
  <li>over</li>
  <li>me!</li>
</ul>

border-box不能处理内联块元素？

1 个答案: