css将列表以行内块显示时怎么把他们之间的间隙去掉?在<li>标签上设置...
发布网友
发布时间：2022-04-28 10:29
共3个回答
热心网友
时间：2022-04-21 00:18
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;目前这个方法可以完美解决，且兼容其他浏览器。
热心网友
时间：2022-04-21 01:36
这是浏览器的默认值导致的，请先初始化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;}
热心网友
时间：2022-04-21 03:10
*{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;}
ul,li{list-style-type:none}
