0

現在、2 行のテーブルを使用してレイアウトされている水平メニュー/ナビゲーション バーがあります。このままでも問題ありませんが、できればテーブルを使わずに作成する方法を教えていただきたいです。私は数日間、あらゆる種類の div/spans/uls floats ブロック/インラインなどを試してみましたが、役に立ちませんでした。主な制約は次のとおりです。

> IE7+、FF3+
> 新しいソリューションは、(ユーザーにとって) 視覚的および機能的に変更されていない必要があります。
> メニュー項目はすべて同じ幅ではなく、変更される場合があります。
> 行の高さは 26px で、「ボタン」の外観を提供する背景画像に対応します。

テーブルを使用した実際の例を次に示します。水平メニュー バー

それで、何か提案はありますか？(または完全な解決策:) 助けてくれてありがとう!

<!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 がなければ、実際にテーブルを使わずに目的を達成することは非常に困難です。

私は実際にプラグインを何年も前に書いて、要素の浮動リストを親の幅いっぱいにします: http://exscale.se/archives/2007/11/09/jquery-full-width-navigation-plugin/ただし、非常に制限されており、新しいバージョンの jQuery では機能しない可能性があります。

于 2012-02-23T08:43:55.993 に答える