Можно ли реализовать такое меню без флексов?

Question

[azuf]

На сайте MDN есть практическое задание по верстке страницы.

Fundamental layout comprehension

В результате должен получится такой макет



Можно ли сверстать такое меню без флексов? Обратите внимание, что расстояние между пунктами меню везде одинаковое, хотя длина названий разная. Здесь можно посмотреть код.

Comments

[Владислав Лысков]

Внимание! Есть гвоздь, есть молоток, зачем искать способ забить его серпом

[azuf]

Потому что могу и потому что хочу. Вы когда чему то учитесь, всегда делаете только как правильно?

[Alfieros]

Владислав Лысков, Всё верно. В задании указано, что можно использовать все подручные средства.

Answer 1

[xdevelx]

CSS Grid Layout - на MDN среди вариантов реализации он перечислен
https://codepen.io/xdevelx/pen/rNYazer


PS На данный момент flex является для такой менюшки оптимальным решением. Для гридов придется указывать количество ячеек, что не совсем подходит для меню, у которого может быть любое количество пунктов.

Comments

[azuf]

Спасибо, но хочется понять как без флексов и гридов.

[xdevelx]

azuf, Без фиксированной ширины или фиксированных отступов никак. Только если вариант с css table - display table и table-cell, но этот вариант подходит для центрированного текста для всех пунктов, а здесь первый и последний прибиты к краю. Если вы учитесь, то должны понять и принять, что на сегодняшний день такое меню делается исключительно на flex.

[azuf]

xdevelx, напишите это в отдельном ответе на вопрос и я выберу его как решение. Если хотите конечно. Мне именно это хотелось узнать, можно ли вообще и насколько сложно.

Answer 2

[Alfieros]

Пример

Comments

[azuf]

У вас не как на фото. Правый пункт меню не такой. Там название должно прижиматься к правому краю. Код, который вы первый раз написали не работает. Вот мой код. После комментария вставил ваш код.

[azuf]

По запарке забыл прописать класс menu к тегу nav. Получилось вот что. Не понял зачем вы жестко прописали ширину. Как это должно помочь?

[Alfieros]

azuf, я накидал на скорую руку для примера, дальше сами.

[azuf]

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

[Alfieros]

azuf, единственное гибкое решение это вот только так. Остальное уже придирки. Вы ещё линейкой на экране замеряйте расстояние между словами. В условиях сказано расстояние между элементами от div к div, вот оно всегда одинаковое, как в моём примере.
В условиях не задана ширина контейнера меню, ни ширина экрана. Если вы выводите статичное меню из 5 пунктов, то подбирайте значения в пикселях для всех дочерних элементов.
И как уже писалось выше:

Внимание! Есть гвоздь, есть молоток, зачем искать способ забить его серпом

Вам дали примеры и дельные советы, включайте фантазию и делайте свой пиксель перфект, если вас не устраивают эти решения.

На практике так не бывает. Даже если есть ограниченная область контейнера меню в 1170px или 1440px, а ссылки в меню с разным кол-вом символов, вряд ли кому-то в голову придёт идея прописывать каждому элементу в меню свои размеры в пикселях, если конечно заказчик не с прибабахом или за исключением очень редких моментов. Ну или намучаетесь с медиа запросами.
Используйте flex или grid, и не мучайтесь.

Answer 3

[tyzberd]

в 3 версии bootstrap нет флексов, вот меню Justified https://getbootstrap.com/docs/3.4/components/#nav-...
там сделано с помощью

.nav-justified>li {
    display: table-cell;
    width: 1%;
}

Comments

[xdevelx]

Такой вариант прокатит только с text-align: center; для всех пунктов. А нужно первый text-align: left; и последний text-align: right; - а так уже ширина между пунктами разная получится.
Но раньше такой вариант с css table был на вооружении - нынче его использовать моветон.

[azuf]

Вы уверены, что .nav-justified работает так как требуется в задании? Мне не удалось быстро найти в исходниках 3-го бутстрапа как это реализовано. В 4-ом сделано на флексах.