我遇到了以下问题。我有一个水平菜单栏,我想在页面顶部设置样式。这是它的 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 +
+ + + + + +
+--------------------+-----+--------------------+-----+--------------------+
基本上,我需要以下内容:
整个页面在中心 (id="center") 是固定宽度 (960px) 并具有可扩展的可变大小侧边栏 (id="left" 和 id="right")。
导航栏跨越中心 div,因此也是 960px 宽
导航栏有一个 960px 宽的背景图像,并且有一个已知的高度(不确定导航栏的高度是否已知对 CSS 样式有影响)。
标有“/”的部分是显示此“/”字符的图像。这些图像与导航栏的高度相同,宽度为 30 像素。
我希望包含链接产品、客户和发票中的每一个的区域具有相同的宽度,而不管文本宽度的差异。每个的宽度应为 300 像素。
如果其中一个链接的名称很长(例如,如果我们在其中一个标题中有“产品列表的超长标题”而不是“产品”,那么文本不应换行到下一行,但应该被截断(可能在文本末尾显示一个省略号)。在实践中,我们希望文本始终完全适合,因为中心 div 的宽度是固定的,因此分配较小的字体是必要的。
我希望每个产品、客户和发票链接在其边界框内垂直和水平居中。
就是这样,这就是我一直在努力做的。
但是我在文本居中时遇到了问题,部分原因是我永远无法判断是否应该将属性应用于元素(例如,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; }