body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td
{margin: 0;padding: 0;}
body{text-align: center;font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;}
ul{ list-style: none;}
a{text-decoration: none;}
img{border: none;}
/* 黑色导航样式开始 */
.black-nav {
width: 100%;
height: 40px;
background-color: #333;
line-height: 40px;
font-size: 12px;
}
.wrap{
height: 1226px;
margin: 0 auto;
}
.left-nav{
float: left;
}
.right-nav{
float: right;
}
.left-nav li{
float: left;
}
/* 黑色导航样式结束 */
<body>
<div class="black-nav">
<div class="wrap">
<ul class="left-nav">
<li><a href="#">小米官网</a><span>|</span></li>
<li><a href="#">小米商城</a> <span>|</span></li>
<li><a href="#">MIUI</a><span>|</span></li>
<li><a href="#">loT</a><span>|</span></li>
<li><a href="#">云服务</a><span>|</span></li>
<li><a href="#">天星数科</a><span>|</span></li>
<li><a href="#">有品</a><span>|</span></li>
<li><a href="#">小爱开放平台</a><span>|</span></li>
<li><a href="#">企业团购</a><span>|</span></li>
<li><a href="#">资质证照</a><span>|</span></li>
<li><a href="#">协议规则</a><span>|</span></li>
<li><a href="#">下载APP</a><span>|</span>
<div class="download">
<img src="./1.CSS/image/download.png" alt="">
<p>小米商城APP</p>
</div>
</li>
<li><a href="#">Select Location</a></li>
</ul>
<ul class="right-nav">
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">消息通知</a></li>
<li class="cart"><a href="#"><span class="iconfont">󰅹</span>购物车(0)</a>
<div class="cart-list">购物车中还没有商品,赶紧选购吧!</div>
</li>
</ul>
</div>
</div>
</body>
为啥设置浮动后左右两边导航不是居中而是两边呢?