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

CSS中 li 之间的间隔如何取消?,第1张

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

<ul>
    <li>
    </li>
</ul>

这样的写法改成

<ul><li></li></ul>
或者
<ul><
li><
/li></ul>

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

<ul>
<li style="background-image:url(images/login_bggif); background-repeat:no-repeat; height:25px; line-height:25px; text-indent:35px; font-size:14px; font-weight:bold; color:#750000;">收藏品分类
将style中的margin属性调整一下就好了嘛,或者调整padding的值也行的。
</li>
<li style="width:220px; height:52px; margin-left:3px; margin-top:5px; padding: 5px;"><img src="images/bei_007gif" /></li>
<li style="width:220px; height:5px; background-image:url(images/bei_009gif); background-repeat:no-repeat; margin-left:3px; padding: 5px;"></li>
<li style="width:220px; height:54px; margin-left:3px; padding: 5px;"><img src="images/bei_008gif" /></li>
</ul>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/13386085.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-26
下一篇 2023-07-26

发表评论

登录后才能评论

评论列表(0条)

保存