8

我制作了一个仅限 CSS 的下拉菜单。要求是有一个水平条的项目，每个项目可以下拉一个垂直菜单。此外，这些项目不应删除三级菜单，而应仅显示项目符号列表。我的 html 有三个嵌套ul，菜单在所有现代浏览器中都能完美运行。它看起来像这样：

原来的

但是，我不喜欢链接后面的较暗框如何从项目符号右侧开始并且没有延伸到整个菜单宽度，所以我玩了一会儿，最后做出了这个调整：

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

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

在职的

并且由于embeeing相对于字体大小的性质，它独立于字体大小工作，就像这里显示的较大字体大小一样：

工作（大字体）

我在 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 是魔法距离......

4

4 回答 4

5

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

您可以通过同时设置 的 padding-left 和 margin-left 来使用它li。例如：

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

显然，一些（主要是较旧的）浏览器使用填充和一些边距 - 所以一定要同时设置。

于 2011-11-09T18:12:03.897 回答
4

您绝对应该进行 CSS 重置，然后按照您需要的方式设置属性。永远不要相信浏览器是一致的。它增加了一些编码，但同时为您的代码提供了未来证明。

于 2011-11-09T19:05:31.853 回答
4

给定您的代码，您已将ul其设置为没有边距或填充。但是，你已经设置了你li的 's 这样他们有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;
}

它就在那里。

于 2011-11-10T15:00:30.040 回答
2

要回答问题和您的评论：您的解决方案有效，因为您否定了具有完全相同大小边距的填充。但是列表左侧的间距随着字号的增大而变大。使用 1em 填充和 -1em 边距或 20px 和 -20px 时，您会得到相同的结果。

正如我在评论中提到的，列表的实际默认填充是 40px。更令人困惑的是，在检查用户代理样式表（在 Chrome Dev Tool 和 Firebug for Firefox 中）时，它们会报告独特的 CSS 属性：-webkit-padding-start或-moz-padding-start分别。

我假设这些特殊属性用于代替常规填充，因为列表是 HTML 中的一种特殊情况——它们挂着不计入填充的项目符号/数字。

于 2011-11-10T13:24:48.257 回答