Горизонтальная навигационная панель полной ширины с равномерно расположенными элементами

Question

Начальная точка:

начальная точка http://img12.imageshack.us/img12/3100/example1a.gif

Конечная точка:

конечная точка http://img846.imageshack.us/img846/799/example2w.gif

Я пытаюсь использовать горизонтальную панель навигации, которая заполняет 100% контейнера. В первом примере вы увидите все элементы, выровненные по левому краю. Я пытаюсь заставить его заполнить всю ширину контейнера, как показано во втором примере. Я хочу, чтобы интервал между всеми элементами был одинаковым (в отличие от показанного способа, я просто собрал это вместе, чтобы дать вам представление о том, что я пытаюсь сделать). Мне нужно, чтобы текст не был изображением, а контейнер, в котором он находится, не зафиксирован.

Answer 1

Со статическим числом элементов это легко - http://jsfiddle.net/X56cJ/

Однако, если вы хотите иметь одинаковый интервал между текстом, а не самими элементами - это становится сложно.Опять же, если количество элементов не меняется, вы делаете это с классами CSS и статической шириной.В противном случае это должен быть javascript

EDIT : вот способ 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. </p>

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

Answer 3

Если вы знаете, сколько у вас будет элементов, вы можете указать ширину каждого элемента в процентах.В противном случае это будет невозможно без обращения к таблицам или javascript.