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

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

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

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

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

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

很赞哦! (24)


站点信息

  • 网站平台ThinkCMF 5.1.5
  • PHP版本:7.3.13
  • QQ交流群: 惠达浪技术交流
0.168790s