Как растянуть пункты меню на всю ширину занимаемого контейнера, при этом первый и последний пункты должны вплотную прилегать к краям родителя?

Question

[Александр Андреев]

Дизайнер настаивает что пункты главного меню должны быть прижаты к краям родительского контейнера, схематично выглядит так joxi.ru/8AnXwebhjg71Lm . Количество пунктов естественно может меняться. Более того длинна ссылки разная, ведь где-то это слово "Главная" а где-то "Наши партнёры" или "Бизнес-центр", так что вариант посчитать ширину блока, поделить на количество пунктов, а полученную ширину присвоить пунктам меню - не прокатил. Во первых длинные пункты начинают переноситься на вторую строку, во-вторых там всё же адаптив а с жёстко прописанной шириной как-то не очень адаптируется да и пересчитывать).

Одним из вариантов думал сделать так, выравнивание в ссылках по левому краю, у всех padding: 32px 35px; , но у первого пункта padding-left: 0px; а у последнего padding-right: 0px; но загвоздка в том что последний пункт не "дотягивает" до правого края родительского блока.

Пример https://codepen.io/maler1988/pen/QgLYVz их можно как-то рястянуть, чтобы потом удобно было всё это адаптировать до 768px; (на меньших разрешениях меню будет преобразовано в мобильное) ?

Comments

[Александр Лысенко]

Если вам принципиально использование метода float, посмотрите в сторону свойства display: table-cell, а текст прижимайте к краям через text-align. Но лучше если вы реализуете flex.

[Александр Андреев]

AlexanderZe: нет float не принципиально. Не использовал раньше flex, надо попробовать =)

Answer 1

[ilanagrk]

.container {
width: 1140px;
margin: 0 auto;
border: 1px solid #000;
}

.top_menu {
list-style: none;
list-style-type: none;
padding: 0px;
display: -webkit-flex; /* Safari */
display: flex;
-webkit-justify-content: space-between; /* Safari */
justify-content: space-between;
}

Answer 2

[Егор Живагин]

flex + space-between

Answer 3

[Negwereth]

flex

Answer 4

[Александр Андреев]

Всем спасибо, посмотрел видос про flex, всё сделал =)