传统方式实现导航栏float
<meta charset="utf-8">
<style>
li {
list-style-type: none;
width:100px;
background: pink;
margin:10px;
text-align: center;
float:left;
}
</style>
</head>
<body>
<ul>
<li>音乐</li>
<li>影视</li>
<li>旅游</li>
<li>美女</li>
</ul>
flex实现导航栏
<meta charset="utf-8">
<style>
ul {
display:flex;
align-content:center;
margin:10px;
}
li {
list-style-type: none;
width:100px;
background: pink;
margin:10px;
text-align: center;
}
</style>
<ul>
<li>音乐</li>
<li>影视</li>
<li>旅游</li>
<li>美女</li>
</ul>
对比
那种方式更好呢？当然是flex。float用来布局导航纯属不务正业。
而且在浏览器窗口压缩时，可以对比一下
flex效果
image.png
float效果
image.png
还是尽量用flex比较好。float布局迟早要灭亡的！
