1

我遇到了以下问题。我有一个水平菜单栏，我想在页面顶部设置样式。这是它的 html 的样子：

<body>
  <div id="container">
    <div id="left">
    </div>
    <div id="center">
      <!-- stuff above header here ... -->
      <div id="header">
        <ul>
          <li class="first"><a href="#">Products</a></li>
          <li><a href="#">Customers</a></li>
          <li><a href="#">Invoices</a></li>
        </ul>
      </div>
      <!-- stuff below header here ... -->
    </div>
    </div id="right">
    </div>
  </div>
</body>

我希望它看起来像这样：

+--------------------+-----+--------------------+-----+--------------------+
+                    +     +                    +     +                    +
+      Products      +  /  +      Customers     +  /  +      Invoices      +
+                    +     +                    +     +                    +
+--------------------+-----+--------------------+-----+--------------------+

基本上，我需要以下内容：

  1. 整个页面在中心 (id="center") 是固定宽度 (960px) 并具有可扩展的可变大小侧边栏 (id="left" 和 id="right")。

  2. 导航栏跨越中心 div，因此也是 960px 宽

  3. 导航栏有一个 960px 宽的背景图像，并且有一个已知的高度（不确定导航栏的高度是否已知对 CSS 样式有影响）。

  4. 标有“/”的部分是显示此“/”字符的图像。这些图像与导航栏的高度相同，宽度为 30 像素。

  5. 我希望包含链接产品、客户和发票中的每一个的区域具有相同的宽度，而不管文本宽度的差异。每个的宽度应为 300 像素。

  6. 如果其中一个链接的名称很长（例如，如果我们在其中一个标题中有“产品列表的超长标题”而不是“产品”，那么文本不应换行到下一行，但应该被截断（可能在文本末尾显示一个省略号）。在实践中，我们希望文本始终完全适合，因为中心 div 的宽度是固定的，因此分配较小的字体是必要的。

  7. 我希望每个产品、客户和发票链接在其边界框内垂直和水平居中。

就是这样，这就是我一直在努力做的。

但是我在文本居中时遇到了问题，部分原因是我永远无法判断是否应该将属性应用于元素（例如，a，或其父 div，或其祖父 div），而且我不知道是否有些属性一直沿 DOM 树继承，或者继承是否仅取决于 DOM 树中哪些元素相邻，因为它们涉及父子关系。

到目前为止，我想出了如何照顾 1. 如下：

  div#left { float: left; }
  div#right { float: right; }
  div#center { width: 960px; margin: 0px auto; }

我还从 PSD/JPG 模型中切出了标题背景和标题分隔线。

但是，我无法让其余的工作，特别是 5. 和 7.

有什么建议么？

好的，这就是我最终做的事情：

在这种情况下，由于图像是分隔符而不是项目指示符，因此您不能在 ul 元素内使用 list-style-image 设置它，因为这意味着图像也位于第一张图像的右侧，这会产生错误的效果。

所以我的解决方案是清除：都在包含的 div 上，以确保它单独出现在一行上。然后将 ul 的列表样式设置为无。然后如果 W 是标题 div 的宽度并且菜单中有 N 个超链接，则计算：

floor({W - [(N - 1) * SEPARATOR_IMAGE_WIDTH]} / N) 计算每个包含块的链接的宽度，并为每个 li 元素设置它。除了第一个之外，还为每个 li 设置一个 SEPATATOR_IMAGE_WIDTH 的填充和一个背景。

然后设置 ul、li 的高度和一个指向分隔符图像高度的链接，以防止其折叠。如果您不想一直写下 40px，可以使用继承属性而不是行高。

将链接中的文本居中对齐，并使用一些顶部填充将文本从顶部向下移动一点（因为我找不到更好的方法将文本垂直居中在这 40px 内，欢迎任何想法）

  div#header_middle { clear: both; }
  div#header_middle ul { list-style: none; background: url(images/header_middle_navbar_background.jpg); height: 40px; }
  div#header_middle ul li { float: left; padding-left: 14px; background: url(images/header_middle_entryseparator.jpg) no-repeat; height: 40px; }
  div#header_middle ul li.first { padding-left: 0px; background: none; }
  div#header_middle ul li a { display: block; float: left; text-transform: uppercase; font-size: medium; width: 110px; text-align: center; padding-top: 8px; height: 40px; color: white; }
4

1 回答 1

0

这是一个开始，向我们展示您至少可以从该列表中检查更多数字：

div#header {background-color: green; text-align: center;}
#header li { display: inline-block; }
#header li a { width:300px; display: block; text-align: center; background-color: red;}

顺便说一句，为什么不只是谷歌一个水平导航栏并复制它呢？

于 2012-07-17T12:07:19.500 回答