html – CSS设置li缩进

发布时间：2020-12-14 21:29:23 所属栏目：资源来源：网络整理

导读：谷歌搜索和堆栈溢出没有返回任何结果，我可以认出，所以原谅我，如果这已经被问到之前… 我已经下拉了使用列表作为基础的主菜单。问题是，列表非常广泛，扩展时并不足够缩

谷歌搜索和堆栈溢出没有返回任何结果，我可以认出，所以原谅我，如果这已经被问到之前…

我已经下拉了使用列表作为基础的主菜单。问题是，列表非常广泛，扩展时并不足够缩小。所以这是我的问题！如何通过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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!