Question

我有一个水平菜单/导航栏，目前使用两行表格进行布局。它工作正常，但我想知道如何在不使用表的情况下创建它，如果可能的话。我已经花了好几天尝试各种div / span / uls浮动块/内联等，但无济于事。主要限制因素是：

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

以下是使用表格的工作示例：Horizontal menu bar

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

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

Answer 1

如果不适用于IE7，您可以使用display: table/table-row/table-cell使任何元素充当表格。不幸的是没有显示：表格很难在没有实际使用表格的情况下完成你所追求的目标。

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

Tabel to css水平导航栏

1 个答案: