CSS中 li 之间的间隔如何取消?

发布网友 发布时间：2022-04-24 14:13

我来回答

共6个回答

热心网友 时间：2022-04-06 14:06

这是因为你把li设置成行内元素了，行内元素之间是会有一定间隙的，间隙的大小与默认的font-size设置有关，这个值越大，间隙也越大，如果你在ul层设置font-size=0，那么间隙即可去掉，但是如果ul有字体的话，也看不见了，li里面的字体可以另外设置大小。还有一种办法就是连着写代码：

这样的写法改成

为什么写在一行之后空隙会不见了呢？我认为原因是浏览器会解析HTML代码中行内元素之间的换行符，当行内元素之间没有换行符之后，间隙自然就没了。

热心网友 时间：2022-04-06 15:24

css中li之间有间隙，不连贯的问题：
1、首页要使用margin:0;padding:0去除浏览器的默认值;
2、然后对LI的样式进行规范定义。
例子：
<style>
*{margin:0;padding:0;} /*通配符margin和padding都设为0*/
.box{clear:both;width:500px;height:300px;border:1px solid #ccc}
.box li{float:left;list-style:none;text-align:left;display:inline;width:500px;height:30px;line-height:30px;border-bottom:1px solid #ccc;}
</style>
<div class="box">
<ul>
<li>这里是文字一</li>
<li>这里是文字二</li>
<li>这里是文字三</li>
</ul>
</div>

热心网友 时间：2022-04-06 16:59

你说的那个距离可能是空白节点，你可以把li连着写，不要换行，如;
<ul><li>qqqqqqqq</li><li>dddddddd</li></ul>
不过这样做也不是好办法，所以你可以把样式改成：
li{ float: left; list-style: none;}追问好像对了。。。！可是为什么我看别人换行都没有问题的= =

来自：求助得到的回答

热心网友 时间：2022-04-06 18:50

两个li之间有一小段间隔肯定是有的啊，你别忽略了一点，<li>标签是<ul>的子标签，所以你把li的属性转换为内联块之后，本身他的间距是依托于他的父类标签的。

你要把<li>的标签的间距变小，可以尝试给<ul>的长度缩小！

希望帮助到你！

热心网友 时间：2022-04-06 20:58

li{margin:0;padding:0;list-style-type:none;}

不是margin和padding那就是list-style-type没有设置了。

试试看~~

热心网友 时间：2022-04-06 23:23

<ul>
<li></li><li></li><li></li><li></li><li></li>
</ul>
CSS：
ul,li{list-style:none}
li{float:left}