Элементы с равномерно распределенным списком

Мне поручили создать горизонтальный список навигации, который выглядит следующим образом:

enter image description here

точка состоит в том, что элементы должны быть на индивидуальном расстоянии от абсолютного слева направо.

Настройка ширины - это боль, потому что разные браузеры интерпретируют их по-разному. Кроме того, количество элементов в этом списке будет меняться в зависимости от пользователя.

Любые советы будут оценены!

Следуя советам @Dean, я нашел себя с приведенным ниже - это в значительной степени правильно. Единственное, о чем я думаю, состоит в том, что левые два элемента, к сожалению, короткие, следовательно, большой разрыв. Я надеюсь, что клиент будет доволен текстовым выравниванием; центр на всех элементах с прикосновением к стороне в стороне!

enter image description here

Ответы

Ответ 1

Я сделал jsFiddle вашего меню... все идеально разнесено, динамично, и оно доходит до левого/правого краев без JavaScript или странных/уродливых семантических проблем HTML. (И он должен работать в IE 6, если это имеет значение.)

http://jsfiddle.net/bXKFA/2/

jpg demo

HTML:

<div id="menuwrapper">
    <div class="menuitem">CAREERS</div>
    <div class="menuitem">TRADE</div>
    <div class="menuitem">CONTACT US</div>
    <div class="menuitem">PRIVACY POLICY</div>
    <div class="menuitem">T&amp;CS</div>
    <div class="menuitem">SITEMAP</div>
    <div class="menuitem">CORPORATE</div>
    <div class="menuitem">ACCESSIBILITY</div>
    <span class="stretcher"></span>
</div>

CSS

#menuwrapper {
    height: auto;
    background: #000;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.menuitem {
    width: auto;
    height: 40px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
    background: #000;
    color: yellow;
}

.stretcher {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

Я основал его на тридцать третьем ответе в этой теме...

Ширина жидкости с равноотстоящими DIVs

Ответ 2

Вы не сможете добиться этого в IE6, но вы можете использовать его для всех основных браузеров:

ul {
display: table; 
table-layout: fixed; /* the magic dust that ensure equal width */  
}
li { display: table-cell; text-align: center; }

Для IE6 (возможно, 7) вам нужно будет использовать Javascript для динамического расчета ширины.

Также не забудьте выровнять текст: оставил свой первый элемент списка и выровнял текст: right the last.

Ответ 3

Я не думаю, что для этого нужен список. Не могли бы вы просто создать серию слов в div с text-align: justify?