0

ダイナミックな横長メニューを手に入れました。常にページ幅の100％にしようとしています。したがって、6つまたは8つのアイテムがある場合、または各アイテムのタイトルを変更したい場合は、各アイテムのサイズを再度変更する必要はありません。

リストとしてのメニューブイット<ul> <li>Item 1</li> <li>Item 2</li> ... </ul>。どうやって提示したいのか（添付画像）をご覧ください。現在、私のhtmlでは、アイテムは全幅の前で終了しています。

これを解決する方法はありますか？メニューをテーブルに変えるとこれは修正されると思いますが、この場合はテーブルを操作しないことをお勧めします。

あなたはここでウェブサイトを見ることができます：ここにリンクの説明を入力してください ありがとう。

ここに画像の説明を入力してください

4

2 に答える 2

4

Ok。それでようやく私はその解決策を見つけました。CSSのみ、JSは必要ありません。実際には非常に簡単です。

ラッピングには次の<ul>ものが必要です。

display: table

それ<li>自体は次のようにする必要があります。

display: table-cell

フロートを取り外します。

それで全部です ：）

于 2012-07-13T08:07:18.487 に答える
0

jQueryと呼ばれるjavascriptフレームワークを快適に使用できる場合は、次のコードを使用できます...

例として、このjsfiddleを参照してください。

http://jsfiddle.net/BDVTP/

まだ行っていない場合は、jqueryを含める必要があります（ただし、そうであるように見えます）

次に、次のコードを使用します。

 <script type="javascript/text">
 $(document).ready(function(){
     var width = $('#access').width(); // width of the menu container
     var total = $('#menu-top-menu li').size(); //number of menu items
     $('#menu-top-menu').find('li').each(function(i){
         var border = parseInt($(this).css('border-left')); //border you have set
         $(this).width((width/total)-border); // calculate width and set it
     });​
 });
 </script>

これがお役に立てば幸いです:)

アイテムがそもそも収まらない場合、これは機能しないことに注意してください-基本的に幅が広がります。

于 2012-05-18T06:06:07.877 に答える