我有一个flexbox导航栏，使用ul，高度为86px。我为中心使用align-items: center，但是当我想添加一个背景色悬停效果在列表项上，具有相同的效果高度作为ul，列表项只是跳到ul的顶部和它不再居中……为什么?我应用显示flex上我使用align-items中心，这种方法是可以的，但我知道这不是正确的方法，因为你需要应用flex on父元素…
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
max-width: 1280px;
margin: 0 auto;
list-style-type: none;
height: 86px;
background-color: beige;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
gap: 15px;
}
ul li {
height: 86px;
}<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>FAQ</li>
</ul>
</body>如果你想让li取导航条的全宽度并根据填充调整其宽度，则只需从元素中删除高度。这是正常的，我想这是一个很好的方法。你的代码只是添加了height，因此里面的文本上升了。将其移除，并在li中加入一些padding
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
max-width: 1280px;
margin: 0 auto;
list-style-type: none;
background-color: beige;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
gap: 15px;
}
ul li {
padding: 20px 20px;
}
ul li:hover {
background: tomato;
}<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>FAQ</li>
</ul>
</body>如果我正确理解了这个问题，我认为你需要删除ul和li元素的高度设置，并为ul元素添加适当的填充，所以这将是整个css:
* {
margin: 0;
box-sizing: border-box;
}
ul {
max-width: 1280px;
margin: auto;
list-style-type: none;
background-color: beige;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
gap: 15px;
padding: 43px 0;
}我在本地运行了这个，得到了一个垂直和水平居中的li项目块。
您将height:86px设置为li元素，这导致了问题
你可以使用padding-top和padding-bottom来增加它们的高度，或者不给li元素添加任何高度，只让align-items工作
如果
li height是必须的，你也可以设置line-height为它们
li{
height:86px;
line-height: 86px;
}
在这里，我刚刚删除了li的高度，它可以工作了
在y轴上对齐liflex项目时，我会在ul和li上同时使用display: flex;。然后只需简单地将height: 100%;添加到li中，以便background-color覆盖整个高度，然后就可以了。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
max-width: 1280px;
margin: 0 auto;
list-style-type: none;
height: 86px;
background-color: beige;
}
ul,
li {
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
li {
height: 100%;
}
li:hover {
background-color: pink;
}
li:nth-child(2):hover {
background-color: lightgreen;
}<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>FAQ</li>
</ul>
</body>