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技巧可以使我们的布局更加美观、整洁。不仅仅是在导航栏上,它们也可以适用于其它列表、表格等元素。
粉丝
0
关注
0
收藏
0