这个是效果图 中间我用ul和li排列的 但是中间那个横条怎么做才好呢 试了好几种方法 都没法居中和上下对齐 有没有懂的帮忙看看 这是我自己的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.nav {
width: 1348px;
height: 40px;
background-color: #333333;
margin: 200px auto;
border-top: 3px solid #ffffff;
border-bottom: 1px solid #999999;
}
.nav ul li {
display: inline-block;
padding: 0px 18px;
line-height: 40px;
height: 25px;
border-right: 3px solid #3c423c;
}
.nav ul .one {
margin-left: 64px;
}
.nav li a {
color: #b0b0b0;
text-decoration: none;
font-size: 12px;
}
.nav li span {
display: inline-block;
width: 2px;
height: 16px;
background-color: #3c423c;
margin: 0px 0px -3px 9px;
}
/* .last {
border-right: #333333;
} */
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="one"><a href="">小米商城</a><span></span></li>
<li><a href="#">MIUI</a><span></span></li>
<li><a href="#">ioT</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></li>
<li class="last"><a href="#">Select location</a><span></span></li>
</ul>
</div>
</body>
</html>
这个可以用before和after这样的伪类做，相对于li做定位