正常情况下做一个自适应的导航条
<style>
a{
width: 20%;
text-align: center;
background: #C00;
text-decoration: none;
color: #fff;
display: inline-block;
}
</style>
<body>
<nav>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
<a href="#">导航</a>
</nav>
</body>
显示的结果：
a标签之间多了很多多余的留白，本以为是没清除默认样式，加上
*{
margin: 0;
padding: 0;
}对a标签之间的留白依然不奏效
此时有两种比较简单的解决方法：
方法一：利用浮动方法
a标签加上float:left;
方法二：flex布局方法
在a标签的父元素加上display:flex;
个人比较喜欢方法二，此时a标签依然存在文档流，比较稳定
