基础样式 .wl-nav
css页:
.wl-nav{
display: block;
width: 100%;
/* 高度不可以受限 */
}
.wl-nav,.wl-nav>ul{
padding: 0 10px;
}
.wl-nav li{
list-style: none;
float: left;
}
.wl-nav::after{
/* 给祖级元素 */
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
zoom: 1;
}
.wl-nav li>a{
display: inline-block;
text-decoration: none;
font-size: 14px;
color: black;
padding: 15px;
}
html页:
<nav class="wl-nav">
<ul>
<li><a href="#">导航1</a></li>
<li class="active"><a href="#">导航2</a></li>
<li><a href="#">导航3