三列 <DIV> 导航栏，基于中心 <DIV> 的宽度答案

【问题标题】：Three column <DIV> navigation bar, based on center <DIV>'s width三列 <DIV> 导航栏，基于中心 <DIV> 的宽度
【发布时间】：2011-03-23 13:08:25
【问题描述】：

我想要完成的是一个居中对齐的导航栏，两边都用左右填充 div 填充。

实际的导航栏目前是一个inline-block div，包含我的链接标签和左右过渡图像，这将导致导航栏的背景占用剩余空间。

通常，我会将导航栏置于 100% 宽度的 div 中，并使用该宽度的 div 作为背景，但由于我使用的是半透明的 .png 文件，因此不能这样重叠。

我想要的布局：

(Click image to view full size.)

我更新了这个问题以包含我正在使用的实际图像。目前我将三个<div>s（技术上，中心是<UL>）设置为固定宽度，但我想增加添加/删除链接的灵活性，它会相应地扩大和缩小<div>s .正如我之前所说，我无法将中心链接居中对齐并将它们重叠在背景上，因为我对图像使用了半透明的.png 文件。

【问题讨论】：

标签： css layout html navigation

【解决方案1】：

事实上，您不需要填充 <div>。您需要做的就是指定一个auto 水平边距，它会自动扩展以占据所有可用空间（从而使您的内容居中作为副作用）。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #header-nav {
        width: 100%;
      }

      #header-nav-items {
        margin: 0 auto; /* auto centers */
      }

      #header-nav-items a {
        display: block;
        width: 200px;
        text-align: center;
        background: #f00;
      }
    </style>
  </head>
  <body>
    <div id="header-nav">
      <div id="header-nav-items">
        <a href="#">We are centered!</a>
      </div>
    </div>
  </body>
</html>

【讨论】：

对“自动”边距实际作用的很好（简短而甜蜜）的解释。 +1
这不会使文本居中，因为内部 div 是一个填充父块整个宽度的块。
@Gert G：是的，忘记给#header-nav-items 指定宽度已更正。
一个足够公平的答案，而且我知道保证金：0 auto;技术，我经常使用它。但我 DO 想要两个 div 或 span 来填充左右空间，这样我就可以添加菜单的背景。想想一个水平的白条，我想在其中切入中间以添加链接。正如我之前提到的，我不能有任何重叠，否则这将是一个简单的操作。
@Billy... 看看我的回答。我认为它可以满足您的需求。

【解决方案2】：

好的，我使用 3 列表完成了布局。我确实没有为左右单元格指定宽度，我将中心单元格的宽度指定为 0。中心单元格拉伸以填充内容，并将右侧的两个单元格推开。

有人知道这有什么问题吗？

【讨论】：