SOURCE

<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
<script src="https://kit.fontawesome.com/414be51970.js" crossorigin="anonymous"></script>


<!-- 分解顶部nav -->
<main>
	<nav>
  	<div class="wrapper"
    	<ul class="service">
      	<li><a href="#">小米商城</a></li>
        <li class="line">|</li>
        <li><a href="#">MIUI</a></li>
        <li class="line">|</li>
        <li><a href="#">LOT</a></li>
        <li class="line">|</li>
        <li><a href="#">云服务</a></li>
        <li class="line">|</li>
        <li><a href="#">金融</a></li>
        <li class="line">|</li>
        <li><a href="#">有品</a></li>
        <li class="line">|</li>
        <li><a href="#">小爱开放平台</a></li>
        <li class="line">|</li>
        <li><a href="#">企业团购</a></li>
        <li class="line">|</li>
        <li><a href="#">资质证照</a></li>
        <li class="line">|</li>
        <li><a href="#">下载APP</a></li>
        <li class="line">|</li>
        <li><a href="#">区域</a></li>        
      </ul>
      <ul class="membership">
      	<li><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li><a href="#">消息</a></li>
      </ul>
      <div class="cart"><a href="#"><i class="fas fa-shopping-cart"></i>购物车</a></div>
    </div>
  </nav>
</main>

.clearfix::before, .clearfix::after{
    content: "";
    display: table;
    clear: both;
}

body{
    font-family: Helvetica Neue, Arial, Sans-serif;
    font-size: 14px;
    line-height: 1.5;
    min-width: 1266px;
    background: lightpink;    
}
nav{
  width: 100%;
  background-color: #333;
  line-height: 40px;
}
.wrapper{
  width: 1266px;
  margin: 0 auto;
}
nav ul.service{
  float: left;
}
nav ul.membership, nav .cart{
  float: right;
}

nav div.wrapper ul.service li{
background:white;
}