使列表缩进一致

最常见的列表样式更改之一是缩进距离的改变，即列表项向右推移的距离。这往往会导致挫败感，因为在一种浏览器中有效的样式在另一种浏览器中往往没有相同的效果。例如，如果你声明列表没有左侧边距，那么它们在基于 Gecko 的浏览器中就会顽固地保持原位。本文将帮助你了解可能出现的问题以及如何避免这些问题。

要了解为什么会出现这种情况，更重要的是如何完全避免问题，我们有必要研究一下列表构造的细节。

创建一个列表

首先，来看一个简单，单独的列表项目。该列表项目没有标记符号（或称之为“着重号”），本身也不是列表的一部分。如下图图 1 所示，简单而朴素。

图 1

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

图 2

现在，我们用一个父元素来封装它们；在本例中，我们将用一个无序列表（即 <ul>）来封装它们。根据 CSS 盒模型，列表项的框必须显示在父元素的内容区域内。由于父元素还没有内边距（padding）或外边距（margin），因此我们会看到图 3 所示的情况。

图 3

在这里，蓝色虚线边框向我们显示了 <ul> 元素内容区域的边缘。因为我们没有给 <ul> 元素添加内边距，所以它的内容的包裹层紧贴在三个列表项外。

现在我们来添加列表项目标记，由于这是一个无序列表，我们添加传统的实心圆“着重标记”，如下图图 4 所示。

图 4

从外观上看，标记位于 <ul> 内容区域之外，但这并不是最重要的部分。关键是标记要放在 <li> 元素而不是 <ul> 元素的“首要盒子”外。它们有点像列表项的附属物，悬挂在 <li> 内容区域之外，但仍与 <li> 相连。

这就是为什么在每一个现代浏览器中，标记都会被置于为 <li> 元素设置的任何边框之外，前提是 list-style-position 的值为 outside。如果改为 inside，那么标记就会出现在 <li> 的内容中，就像放在 <li> 开头的行内框一样。

那么，所有组成部分将如何出现在文档中呢？目前，我们的情况与这些样式类似：

css

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

如果我们把这个列表原封不动地放到文档中，就不会有明显的缩进，标记也会有从浏览器窗口左边缘垮散的危险。

要避免这种情况并获得一定的缩进，浏览器实现者只有三种选择。

事实证明，似乎没有人使用过第一个选项。第二个选项被 Opera 采用。Firefox 浏览器采用了第三种方案。

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

图 5

另一方面，Gecko 为 <ul> 元素设置了 40 像素的左内边距，因此，如果使用与制作图 5 完全相同的样式，将示例加载到基于 Gecko 的浏览器中，就会得到图 6。

图 6

正如我们所看到的，无论标记位于何处，它们都会与 <li> 元素相连。两者的区别完全在于 <ul> 的样式。只有当我们尝试在 <ul> 元素上设置背景或边框时，才能看到其中的区别。

综上所述，我们可以得出这样的结论：如果希望在 Gecko 和 Opera 之间一致地呈现列表，需要同时设置 <ul> 元素的左外边距和左内边距。为此，我们可以完全忽略 <li>。如果你想重现 Netscape 6.x 中的默认显示方式，可以这样写：

css

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

如果对 Opera 采用的模式更感兴趣，那么这样写：

css

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

当然，也可以填写自己喜欢的值。如果你喜欢，可以将两者都设置为 1.25em——没有理由一定要使用基于像素的缩进。如果你想将列表重置为无缩进，那么仍需将外边距和内边距都清零：

css

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

但请记住，这样做会使着重符号挂在列表及其父元素之外。如果父元素是 body，那么着重号就很有可能完全位于浏览器窗口之外，从而不可见。

最后，我们可以发现，本文中提到的浏览器在列表布局方面都没有对错之分。它们使用不同的默认样式，这就是问题所在。如果能确保同时为列表的左内边距和左外边距设置样式，那么列表缩进的跨浏览器一致性就会大大提高。