水平居中列表项（比你想象的要难一点）

编码菜单的当前标准是无序列表。 它不像 <nav> 标签那样语义，但也不错。 毕竟，导航是各种列表。

如果您想使此导航无序列表水平，您基本上有两种选择

• 使列表项内联，而不是默认的块。 .li { display: inline; } 这不会在列表项之后强制换行，它们将尽可能水平排列。
• 浮动列表项。 由于我们经常希望列表项显示为块，以便我们能够为它们设置固定宽度，因此我们被迫将它们浮动到左侧或右侧以水平排列它们。

现在，让我们对如何显示此菜单做出一些常见的决定

• 我们希望菜单居中。 无论菜单是在固定宽度环境还是流体宽度环境中，我们都希望菜单元素在父元素中居中
• 菜单将是一个水平条，因此我们希望确保该条在视觉上看起来像一条条。 我们想为此使用重复的背景图像。

现在我们遇到了麻烦。 <ul> 本身无法负责背景图像，因为它只会在必要时才能帮助居中。 因此，我们将其放在一个宽度为 100% 的 div 内以处理背景图像。 但现在我们的居中技巧不起作用。 说实话，我不确定为什么，但是应用 .ul {margin: 0 auto;} 在这里不起作用。 这就是技巧所在……

将列表包装在表格 div 内

如果我们将菜单包装在一个“表格”div 中，我们就可以解决这个问题。 如果您熟悉来自 CSSPlay 的 Stu Nicholls，他经常在他的很棒的水平菜单上使用此 方法。 查看 HTML

<div id="menu-outer">
  <div class="table">
    <ul id="horizontal-list">
      <li><a href="#"><img src="images/list-item-1.gif" alt="list item 1" /></a></li>
      <li><a href="#"><img src="images/list-item-2.gif" alt="list item 2" /></a></li>
      <li><a href="#"><img src="images/list-item-3.gif" alt="list item 3" /></a></li>
      <li><a href="#"><img src="images/list-item-4.gif" alt="list item 4" /></a></li>
    </ul>
  </div>
</div>

现在看看使它发生的非常简单的 CSS

#menu-outer {
	height: 84px;
	background: url(images/bar-bg.jpg) repeat-x;
}

.table {
	display: table;   /* Allow the centering to work */
	margin: 0 auto;
}

ul#horizontal-list {
	min-width: 696px;
	list-style: none;
	padding-top: 20px;
	}
	ul#horizontal-list li {
		display: inline;
	}

是表格 div 完成了这项工作。 有些时候我认为“无论什么有效”应该是 CSS 的口号。

查看演示   下载文件