CSS如何实现手机端底部导航绝对居中

飘逸的风5年前 (2020-11-26)前端1710

最近在做一个web移动端的项目，底部导航菜单本来是固定的4个，后来客户要求，底部导航按钮可以后台编辑，也就是说，可以是4个，也可以是4个。但是，按照4个的距离设定好样式，当按钮增加5个的时候，整体样式就不对了。

一种方法是程序动态调整每个按钮的宽度百分比，但是这样不够自动化。找了一些CSS相关资料，最终完美解决这个问题（这对于前端工程师来说是小菜一碟）。

以下是解决方法：

CSS：

.nav {position: fixed;bottom:0; background-color: #0070C7; width: 100%;}
.nav ul,.nav ul li {list-style: none; margin: 0; padding: 0px;}
.nav ul {display: -webkit-box;display: -ms-flexbox;display: flex;}
.nav ul li {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;text-align: center;}
.nav ul li a {display: -webkit-box; display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;height: 60px;/*width:100%;*/ color: #FFF;text-decoration: none;}

HTML演示：

<div class="content">我是内容</div>
<div class="nav">
	<ul>
		<li><a href="#">Home<br>首页</a></li>
		<li><a href="#">关于</a></li>
		<li><a href="#">新闻</a></li>
		<li><a href="#">产品</a></li>
		<li><a href="#">联系</a></li>
	</ul>
</div>