我要UL执行以下操作：
我想UL垂直居中放置Nav。我尝试过使用包装器，display: table;但没有用。
我希望LI将的宽度均匀地水平分布在的宽度上UL，而这样做的效果display: flex;并不完美。
而且我需要使其与高度无关，因为以后可能会发生变化。
我有以下代码：
nav {
width: 780px;
height: 50px;
text-align: center;
background-color: pink;
}
nav ul {
list-style-type: none;
display: flex;
}
nav ul li {
display: inline-block;
margin: 0 auto;
padding: 10px;
background-color: lightgreen;
}<nav>
<ul>
<li>sample</li>
<li>sample</li>
<li>sample</li>
</ul>
</nav>希望您能帮到我，谢谢。
只需调整一下Flexbox布局即可：
nav {
width: 780px;
height: 50px;
text-align: center;
background-color: pink;
}
nav ul {
height: 100%; /* take height of nav parent */
list-style-type: none;
padding-left: 0; /* remove default UL padding */
display: flex;
justify-content: space-around; /* horizontal alignment (applies to child elements) */
align-items: center; /* vertical alignment (applied to child elements) */
}
nav ul li {
/* display: inline-block; <-- not necessary */
/* margin: 0 auto; <-- not necessary */
padding: 10px;
background-color: lightgreen;
}<nav>
<ul>
<li>sample</li>
<li>sample</li>
<li>sample</li>
</ul>
</nav>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句