一致的列表缩进 | CSS Lists and Counters: Consistent list indentation

CSS Lists and Counters: Consistent list indentation

列表中最常见的样式变化之一是缩进距离的变化，即列表项向右移动的距离。在一个浏览器中工作的东西在另一个浏览器中通常不会有相同的效果。例如，如果声明列表中没有左边距，则会在Internet Explorer中移动，但是在基于Gecko的浏览器中会固定不动。本文将帮助您了解可能发生的问题以及如何避免这些问题。

为了理解为什么是这样，更重要的是如何完全避免这个问题，有必要检查清单构建的细节。

列清单

首先，我们考虑一个单纯的清单项目。这个列表项没有标记（否则称为“项目符号”），并且还不是列表本身的一部分。如图1所示。

该虚线红色边框表示列表项内容区域的外部边缘。请记住，此时列表项没有填充或边框。如果我们再添加两个列表项，就会得到如图2所示的结果。

现在我们把它们包装在一个父元素中; 在这种情况下，我们将它们包装在一个无序列表（即，<ul>）中。根据CSS框模型，必须在父元素的内容区域中显示列表项目的框。由于父母没有填充或空白，我们得到图3所示的情况。

在这里，虚线的蓝色边框显示了<ul>元素内容区域的边缘。由于我们没有对<ul>元素进行填充，所以它的内容紧紧围绕着三个列表项。

现在我们添加列表项标记。由于这是一个无序列表，我们将添加传统的填充圆圈“bullets”，如图4所示。

标记在<ul>内容区之外，但这不是重要的部分。关键是标记放置在<li>元素的“主框”之外，而不是<ul>。它们有点像列表项的附件，悬挂在内容区之外，<li>但依然附着在内容区中<li>。

这就是为什么在除Internet Explorer for Windows以外的每个浏览器中，标记都放置在为<li>元素设置的任何边框之外（假定值为list-style-position）outside。如果它变成了inside，那么标记就会被放入<li>内容中，就好像它们是放在最开始处的内联框一样<li>。

缩进两次

那么这一切将如何出现在文档中呢？目前，我们有一种类似于这些风格的情况：

ul, li {margin-left: 0; padding-left: 0;}

如果我们把这个列表按原样放到文档中，就不会有明显的缩进，标记将有从浏览器窗口的左边边缘掉下来的危险。

为了避免这种情况并得到一些缩进，浏览器实现者实际上只有三个选项可用。

• 给每一个<li>构成左边框。

• 给<ul>构成左边框。

• 给<ul>加入一些左边的垫子。

事实证明，似乎没有人使用第一个选项。第二个选项是Windows和Macintosh的Internet Explorer和Opera。第三个被Gecko所采用，并且被所有的浏览器所包含。

我们来看看这两种方法。在Internet Explorer和Opera中，通过在<ul>元素上设置40像素的左边距来缩进列表。如果我们为<ul>元素应用背景颜色，并将列表项和<ul>边框留在原地，我们将得到如图5所示的结果。

另一方面，Gecko 为元素设置了一个40像素的左边填充<ul>，所以给定的样式与用于生成图5的样式完全相同，将示例加载到基于Gecko的浏览器中给出了图6。

正如我们所看到的，标记仍然附着在<li>元素上，不管它们在哪里。所不同的是完全在于如何<ul>风格。如果我们尝试在<ul>元素上设置背景或边框，我们只能看到区别。

寻找一致性

我们剩下的是一个是这样的：如果你想在Gecko，IE浏览器和Opera之间一致渲染，您需要设置两个左边距和左填充<ul>元素。我们可以<li>完全忽略这些目的。如果要在Netscape 6.x中重现默认显示，请编写：

ul {margin-left: 0; padding-left: 40px;}

如果您对遵循InternetExplorer/Opera模型更感兴趣，那么：

ul {margin-left: 40px; padding-left: 0;}

当然，您可以填写自己的首选值。设置为1.25em如果你喜欢的话--没有理由你必须坚持基于像素的缩进。如果您想要重置列表以避免缩进，那么仍然必须同时清除填充和页边距：

ul {margin-left: 0; padding-left: 0;}

但是，请记住，这样做，您将在列表及其父元素之外挂起子弹。如果父级是body，有很大的可能性您的子弹将完全超出浏览器窗口，因此将看不到。

结语

最后，我们可以看到，本文中提到的浏览器在如何布局列表方面没有一个是对的，也没有一个是错的。它们使用不同的默认样式，并且在出现问题的地方使用%27。通过确保您在列表的左填充和左边框都有样式，您可以在列表缩进中找到更好的跨浏览器一致性。

建议

• 更改列表的缩进时，请确保同时设置填充和边距。原始文件信息