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

YnHzGpYq

rjdown

原因是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;目前这个方法可以完美解决，且兼容其他浏览器。

moutqvw

这是浏览器的默认值导致的，请先初始化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;}