谷歌搜索和堆栈溢出没有返回任何结果,我可以认出,所以原谅我,如果这已经被问到之前…
我已经下拉了使用列表作为基础的主菜单。问题是,列表非常广泛,扩展时并不足够缩小。所以这是我的问题!如何通过CSS缩小列表中的缩进量?
解决方法
缩进一个ul下拉菜单,使用
/* Main Level */ ul{ margin-left:10px; } /* Second Level */ ul ul{ margin-left:15px; } /* Third Level */ ul ul ul{ margin-left:20px; } /* and so on... */
您可以缩进lis和(如果适用)as(或任何内容元素),每个都有不同的效果。
您还可以使用填充左侧而不是边距左,再次取决于您想要的效果。
更新
默认情况下,许多浏览器使用padding-left来设置初始缩进。如果你想摆脱那个,设置padding-left:0px;
尽管如此,左侧边距和左侧填充设置会以不同的方式影响列表的缩进。具体来说:margin-left会影响元素边框外部的缩进,而padding-left会影响元素边框内部的间距。 (Learn more about the CSS box model here)
设置padding-left:0;将li的子弹图标悬挂在元素边框的边缘(至少在Chrome中),这可能或可能不是您想要的。
填充左边和边距左边的例子,以及他们如何在一起使用ul:https://jsfiddle.net/daCrosby/bb7kj8cr/1/