Меню с равномерным выравниванием и прижатыми к краям элементами
Добрый вечер, подскажите наиболее оптимальный вариант для верстки простого меню (нет выпадающих списков), со следующими условиями:
Меню имеет структуру: <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, с помощью него проблема действительно решается, но я хотел бы увидеть более традиционные решения, если таковые имеются. Заранее спасибо всем отозвавшимся) |
Ладно, по традиции - сам спросил, сам ответил.
Вот статья с несколькими вариантами. Статья Можно также посмотреть в сторону ul {display: table-row} li {display: table-cell} Этот способ дает несколько иной, но тоже интересный эффект. |
Часовой пояс GMT +3, время: 16:41. |