html:
<nav class="main">
<div class="main2">
<ul style="display: flex;list-style: none;margin:0 auto;">
<li class="title">图标</li>
<li><a href="">首页</a></li>
<li><a href="">目的大全</a></li>
<li><a href="">目的大全</a></li>
<li><a href="">目的大全</a></li>
<li><a href="">目的大全</a></li>
<li><a href="">目的大全</a></li>
<li><a href="">目的大全</a></li>
<li><a href="">目的大全</a></li>
</ul>
</div>
</nav>
css
@media (max-width:1200px) {
body{
min-width: 1270px;
}
.main{
line-height: 80px;
border-bottom: 4px solid #00A39B;
}
.main2{
width: 1200px;
margin: 0 auto;
}
.title{
width: 200px;
height: 65px;
line-height: 83px;
text-align: center;
font-size: 18px;
}
.main2 ul a{
display: inline-block;
padding: 0 20px 0 20px;
font-size: 18px;
color:#333;
text-decoration: none;
}
.main2 a:hover{
color:#00A39B;
}
}