常见问题您现在的位置是：首页 > 常见问题

如何使用css让元素平均分布

来源：惠达浪原创发布时间：2019-12-23 最后更新：2019-12-23 2212已围观

摘要开发一款模板的过程中，导航栏的链接是平均分布的，但宽度是写死的。实际应用中导航链接数量不定，如何实现平均分布呢？

最近在开发一款模板的过程中，导航栏的链接是平均分布的，但宽度是写死的。而在实际应用中导航链接数量不定，如何实现平均分布呢？

原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更大一些。

很赞哦！ (516)

上一篇： CentOS 安装swoole报错

下一篇： Vagrant 2.2.6不能使用VirtualBox 6.1的解决办法