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水平導航欄

回答

相關問題