css中怎么去掉li前面的空白

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS技巧:如何去掉li前面的空白ul{ list-style:none; margin-left:0; padding-left:0; } li{ display:inline-block; } 在

CSS技巧:如何去掉li前面的空白

ul{
    list-style:none;
    margin-left:0;
    padding-left:0;
}
li{
    display:inline-block;
} 

在创建一个有序或无序列表时,默认情况下每个li元素会带有一个缩进。然而,在某些情况下(比如水平导航栏)我们可能想去掉这个缩进以使布局更美观。这时我们可以用一些CSS来去掉这个缩进。

首先需要将ul的样式中的list-style设置为none,这样就去掉了li前面的默认圆点或数字。

然后,我们需要把ul的margin和padding都设为0,这样就消除了默认的左侧空白边距。

最后,将每个li元素的display属性设为inline-block即可在同一行内显示,而不会另起一行。

这些简单的CSS技巧可以使我们的布局更加美观、整洁。不仅仅是在导航栏上,它们也可以适用于其它列表、表格等元素。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中怎么去掉li前面的空白

粉丝

0

关注

0

收藏

0

已有0次打赏