«

解决li转成行内块产生的空格间隙

时间:2023-3-6 18:07     作者:小诸葛     分类: 前端     正在检查是否收录...


解决li转成行内块产生的空格间隙

使用无序列表做菜单的时候,把li转成行内块,发现li之间有空格间隙,解决办是给ui字体大小设置为0,给li重新定义字体大小。

代码如下:

CSS


            ul {
                background-color: black;
                width: 100%;
                background-color: saddlebrown;
                text-align: center;
                font-size: 0;
            }

            li {
                background-color: white;
                display: inline-block;
                font-size: 16px;
            }

HTML

<ul>
    <li>菜单1</li>
    <li>主页</li>
    <li>日记</li>
    <li>照片</li>
</ul>

行内块

推荐阅读:


扫描二维码,在手机上阅读