正常情况下做一个自适应的导航条
<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标签依然存在文档流,比较稳定