Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Меню с равномерным выравниванием и прижатыми к краям элементами (https://javascript.ru/forum/xhtml-html-css/60619-menyu-s-ravnomernym-vyravnivaniem-i-prizhatymi-k-krayam-ehlementami.html)

Siend 11.01.2016 15:22

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

Меню имеет структуру:
<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, с помощью него проблема действительно решается, но я хотел бы увидеть более традиционные решения, если таковые имеются.

Заранее спасибо всем отозвавшимся)

Siend 12.01.2016 10:08

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

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

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

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


Часовой пояс GMT +3, время: 16:41.