溢出隐藏在ul引起跳跃

Question

所以当添加一个隐藏在这个ul上的溢出（我想要隐藏列表中的其他项目）会导致整个ul跳过大约10px，有人可以说明为什么会发生这种情况吗？ /> 我已经离开了内联css，所以很容易切换到

     <ul style="
    /* max-height: 25px; */
    /* overflow: hidden; */
    /* margin: 0; */">

https://jsfiddle.net/mt7qpn3L/

P.S。我知道还有其他方法可以完成我的隐藏列表，但我很好奇为什么会发生这种情况并提供解决方案

Answer 1

在你的风格中设置ul display: inline;

并删除对overflow:hidden

的评论

Answer 2

Govind走在正确的轨道上。我以为我会回答为什么。它与文本基线有关，文本基线是vertical-align（vertical-align: baseline）的默认设置。

一个有趣的侧面是，如果删除UTF-8字符（中国），基线将跳过几个像素，因为这些字符的基线不同。 CSS基线实际上取决于line-height。这是误导，因为您希望基线是字母“坐”的行，但实际的基线溢出了ul的底部。

因此，当您添加overflow: hidden;时，<ul>会缩小到可能仍然可见的最小高度。而你的基线，不再溢出，现在被有效地切割到元素的底部。因此，当你改变溢出时，一切都会跳转。

我认为这是关于css-baselines的好读物：https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/

Answer 3

vertical-align: middle和ul css选择器上的

li将集中所有内容。