...块显示时怎么把他们之间的间隙去掉?在<li>标签上设置margin:0也没...

发布网友 发布时间：2024-10-11 23:17

我来回答

共3个回答

热心网友 时间：2024-10-14 17:24

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

热心网友 时间：2024-10-14 17:22

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

热心网友 时间：2024-10-14 17:24

你的样式里面不是设置了li的padding，内边距为5px吗？要去掉左右边距，padding:5px 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;}
ul,li{list-style-type:none}