项目符号列表项是不是总是精确缩进 1.8em？

Posted 2023-03-06

【中文标题】项目符号列表项是不是总是精确缩进 1.8em？

【英文标题】：Is a bulleted list item always indented exactly 1.8em?项目符号列表项是否总是精确缩进 1.8em？

【发布时间】：2011-12-25 12:30:31

【问题描述】：

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

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

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

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

并且由于em 蜜蜂相对于字体大小的性质，它的工作方式独立于字体大小，如此处显示的较大字体大小：

我在 Internet Explorer 8+9+10（开发者预览版）、Firefox 3+7、最新的 Chrome、Opera 和 Safari 上对此进行了测试，效果非常好。

但是，我只是不明白为什么正是 1.8em 来完成这项工作。为什么每个浏览器都将项目符号项缩进这么远？我在互联网上搜索了这个主题，但没有发现任何有用的东西。我可以确定这适用于未来的浏览器吗？那些 1.8em 是在 HTML 标准中指定的吗？

提前感谢您的任何提示！

编辑：

致DisgruntledGoat's 回答：如果我使用1em/-1em 或20px/-20px 将不起作用。使用这种风格：

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

对于不同的字体大小，我得到了这个（显然不是随字体大小缩放）结果：

同样，1em/-1em 也是关闭的，看起来像上图中的右侧，但会随着字体大小缩放。出于某种原因，它仍然看起来像 1.8em 是魔法距离......

【问题讨论】：

其实所有浏览器的默认值都是40px，而不是1.8em。

@DisgruntledGoat：好吧，现在我更困惑了……那为什么我的解决方案甚至适用于不同的字体大小？

没有看到你的其余代码，我不能确定，但​​我猜它是在你的 CSS 中的某个地方定义的。默认情况下，项目符号实际上不占用任何空间，如果列表中没有填充，则项目符号将不可见。

@Ryan Kinal：我在这里设置了一个小提琴jsfiddle.net/24M5q，如果你想仔细看看的话。 MenuItem3 在悬停时下拉。

是的。它被定义了。看我的回答。

【参考方案1】：

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

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

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

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

【讨论】：

是的，旧版浏览器（尤其是 IE）做的事情不同，肯定都设置了。

谢谢，这很好。顺便说一句，它必须反过来：margin-left: 1.8em; padding-left: 0;。然而，这仍然不能解释为什么今天的每个浏览器似乎都默认使用 1.8em...

【参考方案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;

它就在那里。

【讨论】：

天哪，我怎么能忽略这一点...非常感谢！我现在觉得很愚蠢:)

没问题，很乐意提供帮助

【参考方案3】：

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

【讨论】：

谢谢！这回答了我的第一个问题（稳健性/未来证明）。我仍然想知道那些 1.8em 来自哪里以及为什么所有浏览器都始终使用它...

重置会适得其反。规范化就是它的所在。

但“标准化”只是一种更智能的重置。

是的。你说得对。强调“更聪明”这句话。关键是使用规范化的概念 - 为您将要使用的样式设置样式，注意默认设置，不要为了编写更多样式而毁掉所有样式。想想YAGNI。

【参考方案4】：

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

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

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

【讨论】：

感谢您的回答。但是，您所说的（在第一段中）似乎并非如此。查看我的更新。

@Philip 这是因为您将这些值应用于<a> 元素而不是列表。所以你仍然从<ul> 获得填充。

我明白你现在的意思了。我之前有点误会你了。我不知何故忘记了我为li *facepalm* 分配了 1.8em 的边距...感谢您的帮助！