1

私はこれで髪を引き裂いています。基本的に、メニューの内容に基づいてコンテナに水平に収まるようにメニューが必要です。したがって、tableandtable-cellプロパティがこれを行うことができることを理解しています。ただし、これをSuperfish メニューと組み合わせて使用​​すると、コンテナーに合わせて拡張することができません。

また、メニューの間に余白/スペースが必要ですが、これtable-cellは完全に無視されているようです。

ここでフィドルのデモをチェックしてください。http://jsfiddle.net/TUQpV/10/

4

2 に答える 2

1

ルールfloat: left;から削除するだけです。.menu liその理由は、lisを左にフロートさせることは、基本的にそれらを少し押しつぶすことであるためです。スペースがあっても、右に拡張することはありません。デモの作業バージョン：小さなリンク。

お役に立てば幸いです。

于 2012-08-24T15:53:59.693 に答える
1

次の 2 つのいずれかを行う必要があります。すべてのメニュー項目を一定のサイズにすることは、コンテナーのサイズをハードコーディングしているため、コンテナーを満たす最も簡単な方法です。

もう 1 つのオプションは、UL の幅と親 div の幅の差を決定する JavaScript を作成し、パディングを増やして子要素間でそのスペースを均等に分配することです。その理由は、LI がその内容に適合するためです。メニュー全体を拡大するには、コンテンツを拡大する必要があります。ここで私がどのようにそれを行うかを見ることができます。http://jsfiddle.net/Nilpo/GGQ4V/3/

$(window).load(function() {

var container = $('div.menu-main-menu-container');
var menu = $('ul.menu');

var difference = container.width() - menu.width();

if (difference > 0) {
    var count = menu.children().length;

    var pad = (difference / count) / 2;

    var total = 0;
    menu.children().each(function(){
        var el = $(this);
        var lpad = parseInt(el.css('padding-left'), 10);
        var rpad = parseInt(el.css('padding-right'), 10);

        el.css('padding-left', lpad+pad);
        total += lpad+pad;

        if ((total+rpad+pad) < difference) {
            el.css('padding-right', rpad+pad);
        } else {
            el.css('padding-right', Math.floor(rpad+pad));
        }
        total += rpad+pad;
    });
}
});

以下を CSS に追加すると、最後のメニュー項目の後のギャップも解消されます。

.menu li:last-child {
    margin:0;
}

EDIT：将来のマージンの変更を壊さないように、おそらく右マージンを変更する必要があります。

.menu li:last-child {
    margin-right: 0;
}
于 2012-08-24T16:59:20.680 に答える