Question

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

实际的导航栏目前是一个内联块div，其中包含我的链接标签和左右过渡图像，这些图像将导入导航栏的背景以占用剩余空间。

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

我想要的布局：

Image of layout showing the three DIVs http://i28.tinypic.com/3451y6c.png (Click image to view full size.)

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

Answer 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>

Answer 2

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

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

三列<div>导航栏，基于中心<div>的宽度</div> </div>

2 个答案: