查看: 111|回复: 2

[IT] css将列表以行内块显示时怎么把他们之间的间隙去掉?在<li>标签上设置margin:0也没有用

[复制链接]

5563

主题

5563

帖子

1万

积分

论坛元老

Rank: 8Rank: 8

积分
16699
发表于 2020-6-28 10:20:53 | 显示全部楼层 |阅读模式

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?在线注册

x
回复

使用道具 举报

0

主题

1825

帖子

204

积分

中级会员

Rank: 3Rank: 3

积分
204
发表于 2020-6-28 10:21:36 | 显示全部楼层
原因是display:inline-block;属性产生的间隙。
display:inline-block是让元素在一行显示,但是这些元素在html里面是上下行排列的,所以中间有换行符,于是并排显示就有了换行符带来的空隙。
方案一:给元素设置float:left,缺点高度塌陷,要清除浮动。(推荐)
li{display:inline-block;padding:5px;background-color:#ff6;float:left;}
.clr:after{clear:both;display:block;overflow:hidden;height:0;content:".";}
.clr{zoom:1;}
<ul class="clr">
<li><a href="">HTML</a></li>
<li><a href="">CSS</a></li>
<li><a href="">Javascript</a></li>
<li><a href="">XML</a></li>
</ul>
方案二:设置子元素的margin-left为负值,但是元素之间的间隙大小是根据上下文的字体大小确定的,而每个浏览器的换行空隙大小不同,如果font-szie:16px,chrome空隙为8px,火狐空隙为4px.所以这个方法不通用。
方案三:设置父元素 display:table;word-spacing:-1em;目前这个方法可以完美解决,且兼容其他浏览器。
回复 支持 反对

使用道具 举报

0

主题

1829

帖子

202

积分

中级会员

Rank: 3Rank: 3

积分
202
发表于 2020-6-28 10:22:28 | 显示全部楼层
这是浏览器的默认值导致的,请先初始化css值,就是将以下代码,放到css最前面,归0默认样式
*{padding:0;margin:0;}
div,a,p,span,b,h1,h2,h3,h4,h5,h6,small,strong,dt,dl,ul,li{padding:0;margin:0;}
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 在线注册

本版积分规则

QQ|手机版|Archiver|我要投稿|洛阳IT论坛 ( 豫ICP备18021590号 )|网站地图

GMT+8, 2020-9-21 11:42 , Processed in 4.537787 second(s), 25 queries .

Powered by 洛阳IT论坛网 X3.2

© 2018-2025 China Inc.

快速回复 返回顶部 返回列表