css - 等間隔のアイテムを備えた全幅の水平ナビゲーションバー

Question

出発点：

終点：

コンテナの100％を埋める水平ナビゲーションバーを作成しようとしています。最初の例では、すべてのアイテムが左揃えで表示されます。2番目の例に示すように、コンテナの全幅を埋めるようにしようとしています。すべてのアイテムの間隔を均一にしたい（表示されている方法とは異なり、私が何をしようとしているのかを理解できるように、すばやくまとめます）。テキストが画像ではない必要があり、テキストが入るコンテナは流動的で固定されていません。

Answer 1

要素の数が静的であれば、簡単です-http://jsfiddle.net/X56cJ/

ただし、要素自体ではなく、テキスト間の間隔を均一にしたい場合は、注意が必要です。繰り返しますが、要素の数が変わらない場合は、cssクラスと静的幅を使用して変更します。それ以外の場合は、JavaScriptである必要があります

編集：要素間に同じスペースを取得するJavaScriptの方法は次のとおりです。

HTML：

<ul class="menu">
    <li>About Us</li>
    <li>Our Products</li>
    <li>FAQs</li>
    <li>Contact</li>
    <li>Login</li>
</ul>

JS：

function alignMenuItems(){
    var totEltWidth = 0;
    var menuWidth = $('ul.menu')[0].offsetWidth;
    var availableWidth = 0;
    var space = 0;

    var elts = $('.menu li');
    elts.each(function(inx, elt) {
        // reset paddding to 0 to get correct offsetwidth
        $(elt).css('padding-left', '0px');
        $(elt).css('padding-right', '0px');

        totEltWidth += elt.offsetWidth;
    });

    availableWidth = menuWidth - totEltWidth;

    space = availableWidth/(elts.length);

    elts.each(function(inx, elt) {
        $(elt).css('padding-left', (space/2) + 'px');
        $(elt).css('padding-right', (space/2) + 'px');
    });
}

ここに完全な例

Answer 2

親にdisplay：tableを使用し、子にdisplay：table-cellを使用するとうまくいきます。これは<=IE7ではサポートされていません。

http://codepen.io/simply-simpy/pen/jzski

Answer 3

要素の数がわかっている場合は、各要素の幅をパーセントで指定できます。そうでなければ、テーブルやJavaScriptに頼らなければそれは不可能です。