跪求哥哥們回答
這個是效果圖 中間我用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="#">云服務(wù)</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="#">企業(yè)團購</a><span></span></li>
<li><a href="#">資質(zhì)證照</a><span></span></li>
<li><a href="#">協(xié)議規(guī)則</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>
2021-07-19
這個可以用before和after這樣的偽類做，相對于li做定位