0

我有一个水平菜单/导航栏，目前使用两行表布局。它可以正常工作，但如果可能的话，我想知道如何在不使用表格的情况下创建它。我花了几天的大部分时间尝试各种 div/spans/uls 浮动块/内联等，但无济于事。主要约束是：

> IE7+、FF3+
> 新解决方案必须保持视觉和功能不变（对用户而言）。
> 菜单项的宽度不尽相同，可能会发生变化。
> 行高为 26 像素，以容纳提供“按钮”外观的背景图像。

这是一个使用表格的工作示例：水平菜单栏

那么，有什么建议吗？（或完整的解决方案：）感谢您的帮助！

<!DOCTYPE HTML><html><head>
<title>Nav Bar Test</title>

<style>
body { font-family: arial; }

.page-wrapper {
   width: 850px; margin: auto; border: solid  02px  black; background: cyan;}

table.menu_bar {
   width    : 100%;
   font-size: .9em;
   border-style   : none;
   border-collapse: collapse;
   }

table.menu_bar td {
   background-color: white;
   border-width    : 1px;
   padding         : 0px;
   border-style    : solid;
   border-color    : #555;
   }

.menu_bar a {
   display          : block;
   height           : 26px;
   color            : black;
   text-align       : center;
   text-decoration  : none;
   background       : url(GRAY_bg1.PNG);
   background-repeat: repeat;
   background-color : silver;
   overflow         : hidden;
   }

.menu_bar a:hover {
   background: url(RED_bg1.PNG); background-color : red;}

.menu_bar a:active {
   background: url(RED_bg2.PNG); background-color : #F55;}

.menu_bar div { margin-top: 4px; }
</style>

</head>

<body><div class="page-wrapper"><br>

<table class="menu_bar" ><tr>
   <td><a href="#" class="menu_bar"><div>Menu Item</div></a></td>
   <td><a href="#" class="menu_bar"><div>Very Long Menu Item</div></a></td>
   <td><a href="#" class="menu_bar"><div>Long Menu Item</div></a></td>
   <td><a href="#" class="menu_bar"><div>Item </div></a></td>
   <td><a href="#" class="menu_bar"><div>Menu Item</div></a></td>
</tr></table>

<br></div><!--End page-wrapper--></body></html>
4

1 回答 1

0

如果不是 IE7，您可以使用display: table/table-row/table-cell任何元素作为表格。不幸的是，没有 display: table 如果不实际使用 table，很难完成你所追求的。

实际上，我很久以前写了一个插件，它使元素的浮动列表占据了它们父级的全部宽度：http : //exscale.se/archives/2007/11/09/jquery-full-width-navigation-plugin/虽然非常有限，并且可能不适用于较新版本的 jQuery。

于 2012-02-23T08:43:55.993 回答