Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или ЗарегистрируйсяДля просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или ЗарегистрируйсяДля просмотра ссылки Войди или ЗарегистрируйсяДля просмотра ссылки Войди или ЗарегистрируйсяДля просмотра ссылки Войди или ЗарегистрируйсяДля просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для ie 6 и 7 версий таким образом не получится, так как значение
table-cell для свойства
display поддерживается только с 8 версии. Здесь можно пойти двумя путями:
1. Сделать меню настоящими таблицами
2. Либо применить данное решение
Для просмотра ссылки Войди или Зарегистрируйся
Принцип решения такой:
1. Для родительского дива ставим text-align:justify;
2. Делаем список, указываем и для <ul>, и для <li> display:inline
3. Строка меню выровняется по ширине только если меню будет в несколько строк. Строка в единственном числе не будет растягиваться. Чтобы показать браузерам, что у нас в диве несколько строк мы эмулируем еще одну строку с помощью span. Добавляем в родительский див <span>
4. Чтобы span смог эмулировать строку, он должен быть очень широким. Ширину для строкового элемента можно указать только при использовании inline-block. Соответственно меняем для спана дислей и устанавливаем ширину в 100 процентов.
5. Чтобы спан стал невидимым указываем ему высоту 0 и размер шрифта 0
6. Теперь меню выравнивается, но если в отдельном пункте меню будет несколько слов, то эти слова сильно разорвутся. Чтобы отдельный пункт меню из нескольких слов сохранял свою целостность добавим для <a> display:inline-block;
Надо заметить что
inline-block для ie 6 и 7 тоже отображается не совсем точно, но их можно научить отображать его правильно через специальный хак.
