Tabel到CSS水平导航栏

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

> IE7 +，FF3 +
>新的解决方案必须保持视觉&功能上保持不变（给用户）。
>菜单项不是全部相同的宽度，并且可能会改变。
>行高是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>

来源

2012-02-23 Self Evident

这不是一个v'll“转换，并给你的代码”网站！ – 2012-02-23 08:42:56

如果不是IE7，你可以使用display: table/table-row/table-cell使任何元素作为表格。不幸的是，没有显示：表格很难在没有实际使用表格的情况下完成。

我实际上写了一个年龄前的插件，它使元素的浮动列表占用了父元素的全部宽度：http://exscale.se/archives/2007/11/09/jquery-full-width-navigation-plugin/尽管它非常有限，并且可能无法与较新版本的jQuery一起使用。

来源

2012-02-23 08:43:55 powerbuoy

感谢您的回复。我假设我错过了一些明显的东西，并且我会得到很多“呃 - 只是做这个”类型的回应。但是，我认为越多，使用表格就越适合这种类型的菜单栏。毕竟，列表只是一张简单的表格。
而且，我的情况中最重要的一点是：如果它没有损坏，请不要修复它！ – 2012-02-23 15:33:45

Tabel到CSS水平导航栏

回答

相关问题