常见问题 您现在的位置是：首页 > 常见问题
如何使用css让元素平均分布
来源：惠达浪原创
发布时间：2019-12-23
最后更新：2019-12-23
1623已围观
摘要开发一款模板的过程中，导航栏的链接是平均分布的，但宽度是写死的。实际应用中导航链接数量不定，如何实现平均分布呢？
最近在开发一款模板的过程中，导航栏的链接是平均分布的，但宽度是写死的。而在实际应用中导航链接数量不定，如何实现平均分布呢？
原css：
.nav ul {
height: auto;
overflow: hidden
}
.nav ul li {
float: left;
width: 16.6666%;
}
宽度写死，只能放6个，不能多不能少。
改后css：
.nav ul {
height: auto;
overflow: hidden;
/* 原样式不用动 */
display: flex;
justify-content: space-between;
}
.nav ul li {
/* 去除浮动和指定宽度样式，保留其它样式 */
padding: 0 30px;
}
我的导航，当前页有背景色变化，所以利用padding让li更大一些。
很赞哦！ (390)
