CSS：悬停使列表项比其他子项大

Question

https://jsfiddle.net/fnu483z0/5/

<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>

ul {
  display: flex;
}
ul li {
  list-style: none;
  padding: 1em;
  border-right: 1px solid #000;
  background-color: #CCC;
}
ul li:last-child {
  border-right: none;
}
ul li:hover {
  padding-top: 40px;
  background-color: #333;
}

问题是，在悬停其他物品时也会受到影响，它们还会扩大吗？悬停项目时应该是这样的：

Answer 1

在你的ul add - ＆gt; align-items: flex-start;

ul {
  display: flex;
  align-items: flex-start;
}

ul li {
  list-style: none;
  padding: 1em;
  border-right: 1px solid #000;
  background-color: #CCC;
}

ul li:last-child {
  border-right: none;
}

ul li:hover {
  padding-top: 40px;
  background-color: #333;
  position: relative;
  z-index: 1;
}

<div>
  <ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
    <li>link 4</li>
  </ul>
</div>

Answer 2

  

问题是，在悬停其他项目时也会受到影响，它们也会扩展？

当然他们这样做，因为他们都是同一个弹性容器的孩子 - 并且在其中一个项目中添加填充会改变容器的高度，因此其他项目会随之增长。

你可以通过给悬停项目提供匹配的负边距底部来轻松解决这个问题：

ul li:hover {
  padding-top: 40px;
  margin-bottom: calc(1em - 40px); // your default li padding was 1em,
                                   // so we have to calculate the right difference here
  background-color: #333;
}

https://jsfiddle.net/fnu483z0/18/