Loading
0

关于html里ul和li列表标签默认边距的问题

昨天在编写一个html页面的菜单栏时遇到了一个关于无序列表标签的问题;如下图,菜单栏标签由无序列表组成(section《ul《li》》),ul标签width设置为100%,每个li标签则设置成20%的宽度,理论上五个li标签正好占满这一行内容。奇怪的是,没有给ul设置外边距,也没有给ul的父级section设置内边距,图中红框部分莫名其妙出现了将近40像素左右的空间,把最后一个li挤出去了。


强迫症表示很难受...


解决方法

经过一番摸索,最终确认问题可能是出在ul标签的默认边距上。为ul标签的css加入padding:0;属性,问题解决√。效果如下(之前还尝试了为li添加margin-left:0 !important;  奇怪的是并没有起到一样的效果?!这个就不知道是什么原因惹...)

声明:本文为原创,作者为 Zanyxd,转载时请保留本声明及附带文章链接:https://blog.bugcola.com/note/index.php/200/