代码
<div class="site-topbar">
<!-- 宽有限,中间部分 -->
<div class="container">
<!-- 公司各类网址导航 -->
<div class="topbar-nav">
<a href="#">小米商城</a><span class="shugang">|</span>
<a href="#">MIUI</a><span class="shugang">|</span>
<a href="#">loT</a><span class="shugang">|</span>
<a href="#">云服务</a><span class="shugang">|</span>
<a href="#">天星数科</a><span class="shugang">|</span>
<a href="#">有品</a><span class="shugang">|</span>
<a href="#">小爱开放平台</a><span class="shugang">|</span>
<a href="#">企业团购</a><span class="shugang">|</span>
<a href="#">资质证照</a><span class="shugang">|</span>
<a href="#">协议规则</a><span class="shugang">|</span>
<a href="#">下载app</a><span class="shugang">|</span>
<a href="#">Select Location</a>
</div>
</div>
</div>
css
.site-topbar{
display: flex;
justify-content: center;
height: 40px;
background-color: rgb(51, 51, 51);
}
.container{
width: 1226px;
height: 40px;
line-height: 40px;
font-size: 0.75rem;
color: rgb(176, 176, 176) ;
}
.shugang{
margin-left: 0.3em;
margin-right: 0.3em;
}
.site-topbar a{
font-size: 0.75rem;
color: rgb(176, 176, 176) ;
}
问题原因:a标签默认是行内元素,而行内元素之间的回车键、多个空格、多个制表符(tab)等均会按一个空格来处理,这样的话,如果相邻的两个a标签不在同一行(换句话说它们之间有回车换行符),则显示在页面的时候它们之间就会出现一个空格的间隙。
解决办法一:
要想解决这个问题,最好也是最简单的办法,就是把它们写在同一行且互相之间不留任何字符(包括空格),比如:
<a href="...">链接1</a><a href="...">链接2</a><a href="...">链接3</a>
办法二:
既要把它们写在不同的行,又不想有空隙,可以把a标签改为块级元素。但是要想让块级的a标签仍然排在同一行就要多费一番手脚了,比如通过浮动(浮动时a标签会自动变为块级元素):
给a标签的父元素加上样式,让a标签有行内元素转为块级元素即可
.topbar-nav{
display: flex;
justify-content: flex-start;
}