标签设置为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;}
具体也可以参考
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论