标签设置为inline-block后，如何消除标签之间的间隔。

标签设置为inline-block后，如何消除标签之间的间隔。

 

例如：

 

 

<div>

<ul>
<li><a href="#">学习</a></li>
<li><a href="#">升职</a></li>
<li><a href="#">加薪</a></li>
<li><a href="#">成功</a></li>
<li><a href="http://baidu.com">百度</a></li>
</ul>
</div>

将li元素设置为inline-block后，

div {text-align: center;}
ul {list-style: none;}
li {display: inline-block;background: blue;}
a {color: white;text-decoration: none;}

显示结果为：

标签之间会产生间隙，原因就是书写html代码中，为了美观易读，标签结束后会回车换行，上一个li的结束标签</li>与下一个的开始标签<li>之间有回车，解析后会生成一个字符。

解决方法有以下几种：

1.将其写成如下方式：目的是删除开始标签和结束标签的间隙，但是代码的可读性会变差，看着会非常难受。

<li><a href="#">学习</a></li><li>

<a href="#">升职</a></li><li>

<a href="#">加薪</a></li><li>

<a href="#">成功</a></li>

或者将li的结束标签省略</li>，或者将其写在一行，不过不推荐这种方法

<li><a href="#">学习</a>
<li><a href="#">升职</a>
<li><a href="#">加薪</a>
<li><a href="#">成功</a></li>

2.父元素的font-size设置为0，而后在需要显示的元素恢复原来的字体样式。

div {text-align: center;font-size: 0px;}
ul {list-style: none;}
li {display: inline-block;background: blue;}
a {color: white;text-decoration: none;font-size: 16px;}

具体也可以参考

 

此处

转载于:https://www.cnblogs.com/hys-blog/p/9826385.html