项目符号列表项始终缩进1.8em吗？

Question

我做了一个仅限css的下拉菜单.要求是有一个水平条形项目,每个项目都可以下拉垂直菜单.此外,这些项目不应该删除三级菜单,而只是显示项目符号列表.我的html有三个嵌套ul,菜单在所有现代浏览器中都运行良好.它看起来像这样:

但是,我不喜欢链接后面较暗的盒子是如何从子弹开始的,并没有延伸整个菜单宽度,所以我玩了一下,最后来到这个调整:

#nav li ul li ul li a {
    padding-left:1.8em;
    margin-left:-1.8em;
}

现在,项目符号菜单项看起来就像我想要的那样:

由于em相对于字体大小的beeing 的性质,它的工作独立于字体大小,如下所示更大的字体大小:

我在Internet Explorer 8 + 9 + 10(开发者预览版),Firefox 3 + 7,最新的Chrome,Opera和Safari上进行了测试,它就像一个魅力.

但是,我只是不明白为什么正是1.8em才能完成这项工作.为什么每个浏览器到目前为止都缩进了子弹项？我在这个主题上搜索了互联网,但我没有找到任何有用的信息.我可以确定这适用于未来的浏览器吗？这些1.8em是否在HTML标准中指定？

提前感谢任何暗示!

编辑:

对DisgruntledGoat的回答:如果我使用1em/-1em或20px/-20px,它将无效.有了这种风格:

#nav li ul li ul li a {
    padding-left:20px;
    margin-left:-20px;
}

我得到这个(显然不是缩放字体大小)结果为不同的字体大小:

类似地,1em/-1em也是关闭的,看起来像在上图中的右侧,但缩放与字体大小.由于某种原因,看起来1.8em仍然是神奇的距离......

Answer 1

基于多年不一致的浏览器 - 我会说你不能相信它们永远是一致的.最好的选择是自己强行控制它.

你可以通过同时设置一个填充左边距和左边距来使用它li.例如:

li {
  margin-left: 1.8em;
  padding-left: 0;      
}

显然有些(主要是较旧的)浏览器使用填充和一些边距 - 所以一定要设置两者.

Answer 2

根据您的代码，您已经将其设置ul为没有边距或填充。但是，您已将您的 ' 设置li为margin-left: 1.8em：

#nav li ul li ul li {
    display: list-item;
    margin-left:1.8em;
    list-style:disc outside none;
}

#nav li ul li ul li {
    margin-left: 1.8em;
    padding-left: 0;
}

就是这样。