我有一系列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>
outline
和outline-offset
代替border
,但我真的很想知道为什么我的原始方法不起作用 :/更新:虽然BoltClock提供了一个非常好的解释和建议(这正是我所要求的),但我想提一下我完全忘记了flexbox,它几乎解决了我在行内元素上遇到的所有问题。我将其与BoltClock的透明边框技巧结合起来,得到了最终的JSFiddle解决方案。
box-sizing: border box
- 你在 "border box" 中使用了空格而不是破折号。 - BoltClock