Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.01.2016, 15:22
Профессор
Отправить личное сообщение для Siend Посмотреть профиль Найти все сообщения от Siend
 
Регистрация: 04.02.2012
Сообщений: 196

Меню с равномерным выравниванием и прижатыми к краям элементами
Добрый вечер, подскажите наиболее оптимальный вариант для верстки простого меню (нет выпадающих списков), со следующими условиями:

Меню имеет структуру:
<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

левый край|A B C D E|правый край

1. Элементы A и E прижаты к левому и правому краям соответственно.
2. Между всеми элементами одинаковое расстояние.
3. Количество элементов может меняться (то есть их может быть не обязательно 5).

Простейший способ через
inline
не дает выполнить первый пункт, если же добавить краевым элементам свойства
float: left;
и
float: right;
, то перестает выполняться второй пункт, ну а про процентную ширину я не говорю ввиду того что не будет выполняться третий пункт.

Мой поиск навел меня на flex, с помощью него проблема действительно решается, но я хотел бы увидеть более традиционные решения, если таковые имеются.

Заранее спасибо всем отозвавшимся)
Ответить с цитированием
  #2 (permalink)  
Старый 12.01.2016, 10:08
Профессор
Отправить личное сообщение для Siend Посмотреть профиль Найти все сообщения от Siend
 
Регистрация: 04.02.2012
Сообщений: 196

Ладно, по традиции - сам спросил, сам ответил.

Вот статья с несколькими вариантами.
Статья

Можно также посмотреть в сторону
ul {display: table-row}
li {display: table-cell}

Этот способ дает несколько иной, но тоже интересный эффект.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена стилей класса Павел Турченко Элементы интерфейса 9 30.10.2015 15:24
Бесконечноуровневое меню на CSS ruslan_mart Ваши сайты и скрипты 5 12.01.2015 20:59
Выделение активных пунктов многоуровневого меню на jQuery Letto Элементы интерфейса 2 04.12.2013 15:30
Переход между элементами выпадающего меню Digan jQuery 3 10.10.2012 21:03
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36