4

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

* { 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 }
<ul>
  <li>hover</li>
  <li>over</li>
  <li>me!</li>
</ul>

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

更新：虽然 BoltClock 给出了非常好的解释和建议（这就是我所要求的），但我只想提一下我完全忘记了flexbox，它几乎解决了我在使用内联元素时遇到的所有问题。我将它与 BoltClock 的透明边框技巧相结合，用于我的最终 JSFiddle 解决方案

4

1 回答 1

2

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

将边框更改为轮廓是有效的，因为轮廓的设计对布局没有影响（也因为您随后将边框完全从图片中移除）。

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

* { 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>

于 2016-02-26T03:07:08.237 回答