Равномерное распределение элементов списка <li>

[Tartyga]

Здравствуйте.

Имеется простое горизонтальное меню:

<ul style="width:800px">
  <li>Home</li>
  <li>About</li>
  <li>.....</li>
</ul>

Задана фиксированная ширина.

Как правильно средствами css равномерно распределить <li>?

[psywalker]

fill: 'rateably' - одинаковые отступы от текста до бордеров.

fill: 'equally' - элементы стремятся быть одинаковыми по ширине.

А зачем столько кода?

Вот например накидал вариант, даже к резинке подходит.

http://psywalker.ru/Forum/JS/Primitive/Dom-Zadachi/TableSort/LI-table2.html

сделай кроссбраузерный! аналог моего и смотри сколько кода будет.

А объясни плиз алгоритм fill: 'equally'

[s0rr0w]

init - я бы сделал не так. У тебя есть перечень дефолтных значений. Пусть это будет объект, но находиться он должен на одном уровне с init.

Перебирай потом список дефолтных значений и присваивай нужные значения из объекта o. Так будет гораздо понятнее, чем то, что есть сейчас.

Формулы нечитабельны. Разобраться, что и как происходит, нереально. Портят все подчеркивания в названиях переменных.

Вот такие записи я бы делал по-другому

this.elem[i].style.width = this.elem[i].clientWidth + this.minSide * 2 + 'px';

var node = this.elem[i];
var newWidth = node.clientWidth + this.minSide * 2;
node.style.width = newWidth + 'px';

Вот так не возникает вопросов, с чем работаем, что меняем, на какое значение.

Следующие вещи стоит выносить в отдельные библиотечные функции

                if (window.addEventListener) window.addEventListener("load", initPage, false);
                else if (window.attachEvent && !window.opera) window.attachEvent("onload", initPage);

Снова же, нужно вчитываться, чтобы понять, что тут написано.

[mishka]

s0rr0w, спасибо, замечания учту, переделаю, вынесу в отдельную тему.

[psywalker]

s0rr0w, спасибо, замечания учту, переделаю, вынесу в отдельную тему.

Давай косолапый, будем ждать

Кстати вот такая вот конструкция:

if (window.addEventListener) window.addEventListener("load", initPage, false);
                else if (window.attachEvent && !window.opera) window.attachEvent("onload", initPage);

Легко может работать и так:

if (window.addEventListener) window.addEventListener("load", initPage, false);
                else { window.attachEvent("onload", initPage)};

[Tartyga]

спасибо большое всем за помощь!!

Edited May 10, 2011 by Tartyga

[Great Rash]

mishka2, без комментариев код читать тяжело. Надо слишком вдумчиво читать, а это тяжко

[Bonzash]

<style type="text/css" >
            html, body {
                height: 100%;
                padding: 0;
                margin: 0;
            }
             ul {
                 list-style-type: none;
                 padding: 0;
                 margin: 0;
             }
             li {
                 padding: 0 10px 0 10px;
                 margin: 0;
                 float: left;
		 border: 1px solid black;
		 display: block;
             }
        </style>

самый простой способ на мой взгляд.

Edited May 11, 2011 by Bonzash

[Great Rash]

Bonzash, вы даже не удосужились вникнуть в задачу...