li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

在写页面的时候，会需要将<li>这个块状元素横排显示，此时就需要将display属性设置为inline-block，此时问题出现了，在两个<li>元素之间会出现大约8px左右的空白间隙，下面举例说明：

<html>
    <head>
        <title>demo</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            body{
                width:100%
            }
            ul li {
               list-style-type:none 
            }
            h3 {
                text-align:center;
                color:blue;
                margin-bottom: 10px;
            }
            .wrap{
                width:600px;
                margin:0 auto;
                margin-top:100px;
            }
            .wrap li{
                width:25%;
                height:150px;
                display:inline-block;
            }
            .part1 {background-color: red;}
            .part2 {background-color: blue;}
            .part3 {background-color: yellow;}
            .part4 {background-color: black;}
        </style>
        <body>
            <div class="wrap">
                <h3>li标签空白测试</h3>
                <ul>
                    <li class="part1"></li>
                    <li class="part2"></li>
                    <li class="part3"></li>
                    <li class="part4"></li>
                </ul>
            </div>
        </body>
    </head>
</html>

当li标签不设置display：inline-block属性时，页面效果如图所示：

 

 

 

当li标签设置display:inline-block属性时，页面效果如图所示：

原因：浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个<li>放在一行，这导致<li>换行后产生换行字符，它变成一个空格，占用

了一个字符的宽度。


解决办法：

（1）为<li>设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。

（2）将所有<li>写在同一行。不足：代码不美观。

<div class="wrap">
<h3>li标签空白测试</h3>
<ul>
<li class="part1"></li><li class="part2"></li><li class="part3"></li><li class="part4"></li>
</ul>
</div>

（3）既然是空格占一个字符的宽度，那我们索性就将<ul>内的字符尺寸直接设为0，即font-size:0，将下面样式放入样式表，问题解决。

不足：<ul>中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。

.wrap ul{font-size:0px;}

（4）消除<ul>的字符间隔letter-spacing:-8px，不足：这也设置了<li>内的字符间隔，因此需要将<li>内的字符间隔设为默认letter-spacing:normal。

.wrap ul{letter-spacing: -5px;}
.wrap ul li{letter-spacing: normal;}

 

 

(41条消息) li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？_sjinsa的博客-CSDN博客_li和li之间的空隙

posted @ 2022-05-31 13:36  yeqi7  阅读(460)  评论(0)    收藏  举报