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 回答