li标签做横向导航栏时中间有间距的原因和解决⽅案前端开发中，当我们⽤<li>来实现横向导航栏的时候，总是发现中间会出现⼀条间隙，效果图如下：
下⾯是这个效果图的代码，可以发现此时每个<li>之间都出现了间隔。
<style>
ul{
background-color: black;
width: 500px;
height: 30px;
border: 1px solid;
}
ul>li{
background-color: white;
list-style: none;
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
}
</style>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
引发这种问题的原因是：<li>标签之间存在间隙，每个标签是不连贯的，存在空格。
所以我们的解决⽅案如下：
⼀：既然是因为间隙，最直接的就是去掉间隙。如下。
<ul>
<li>1</li><li>2</li><li>3</li><li>4</li>
</ul>
或者
<ul>
<li>1</li><!--
--><li>2</li><!--
--><li>3</li><!--
--><li>4</li><!--
--></ul>text align center
这种⽅法虽然解决了标签之间的间隙，但是感觉代码的排版杂乱，⽽且实际开发中⽐较繁琐。
⼆：将<li>的⽗标签，也就是<ul>标签的属性 font-size：0，再给 li 标签设置 font-size：...px，代码如下：
<style>
ul{
background-color: black;
width: 500px;
height: 30px;
border: 1px solid;
font-size: 0;
}
ul>li{
background-color: white;
list-style: none;
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 14px;
}
</style>
三：这个⽅法就⽅便多了，给 li 标签设置 float:left; 属性，我的开发中⼀般都是⽤这个⽅法。
<style>
ul{
background-color: black;
width: 500px;
height: 30px;
border: 1px solid;
}
ul>li{
background-color: white;
list-style: none;
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
float: left;
}
</style>
tips：font-size:0；还可以解决图⽚元素img排列时候出现的间隙问题。给img的⽗级元素设置font-size:0；即可解决间隙问题。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。