我有一个清单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
and outline-offset
代替border
,但我真的很想知道为什么我原来的方法不起作用:/
UPDATE:虽然 BoltClock 给出了非常好的解释和建议(这就是我所要求的),但我只是想提一下,我完全忘记了flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/,它几乎解决了我在使用内联元素时遇到的所有问题。我将它与 BoltClock 的透明边框技巧结合起来最终的 JSFiddle 解决方案 https://jsfiddle.net/gxzy6t0f/1/
我现在看到了问题所在。发生的事情是这样的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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)