Доработать меню ul li, как сделать автоматическое вытягивание во всю длину блока все li?

Question

[Антон Вебсайтовский]

Всем привет, подобное не делал.

Есть обычное меню на li, как все элементы ли вытянуть во всю длину блока? чтоб они были адаптивные вытягивались во всю длину.
Как-то на флекс можно, но пока не допетрил.

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

Добавил там стиль для первого элемента li

ul.dropdown li:first-child{
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
}

Осталось тоб hover задействовался для первого элемента, а то он все равно квадрат делает.

Рабочий пример:
https://jsfiddle.net/4kdx5e0o/3/

Comments

[Ankhena]

У флексов свойств меньше десятка, неужели за столько лет не прочитать про каждое из них...
justify-content: space-between распределит дочерние элементы по всей длине главной оси.
flex-grow:1 распределит все свободное пространство среди элементов в одинаковых пропорциях (не элементы будут одинакового размера, а распределение свободного пространства).

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

Ну конечно, вы же закругляете li, а фон задаете ссылке. Либо overflow либо закругляйте ссылку.

[Антон Вебсайтовский]

Ankhena, каюсь, я все не запоминаю свойства, флекс использую около года.
Решил старое меню обновить, на флексе сделать.

Ну вообще вышло что надо )/
https://jsfiddle.net/b74mc8y2/2/

Если применить overflow, с закругляхами да все ок, но есть но ) подменю не выводит )

[Ankhena]

Антон Вебсайтовский, неожиданно, но я рада :)

Если применить overflow, с закругляхами да все ок, но есть но ) подменю не выводит )

Значит, выберите тот способ который подходит в вашем случае.

[Антон Вебсайтовский]

Ankhena, Я как-то делал, но пока не выходит, не помню как )

Во вспомнил) работает ) первый и последний элемент где закругления есть )

.nav ul li:first-child:hover a {
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
}
.nav ul li:last-child:hover a {
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
}

[Антон Вебсайтовский]

Ankhena, скажи какие шрифты для сайта используешь, какие лучше всего во всех браузерах отображаются. Open Sans ? и подобные?

[Ankhena]

Антон Вебсайтовский,

-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;

Угу, только префиксы для border-radius лишние и уже давно.
Ручками их вообще лучше не писать, для этого есть автопрефиксер в сборщиках. Либо в конце верстки ручками, но все равно через него https://autoprefixer.github.io/ru/

[Ankhena]

Антон Вебсайтовский,

скажи какие шрифты для сайта используешь, какие лучше всего во всех браузерах отображаются. Open Sans ? и подобные?

Любые, выбранные дизайнером.

Сама люблю Fira Sans, Lato, Noto Sans, Oswald, Open Sans , Roboto
И по настроению :)

Answer 1

[historydev]

ul {

  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

}

Comments

[Антон Вебсайтовский]

Попробовал, чет не вышло.

[historydev]

Антон Вебсайтовский, так попробуй на другой блок в котором у тебя все li, чёт копи-пастить научился, а башку включать нет.

[Антон Вебсайтовский]

Владимир, Ну да, вышло, оно по центру, но с отступами как быть и бордер, оно как-то все криво.

https://jsfiddle.net/4vora60d/1/

[historydev]

Антон Вебсайтовский, загугли свойство и его параметры, пока контента не будет на всю ширину, между ними будут отступы.

[Антон Вебсайтовский]

Владимир, а зачем flex-wrap: wrap;, если и без него тож самое ) https://jsfiddle.net/b74mc8y2/

[Антон Вебсайтовский]

Вообщем не совсем то что нужно, оно так по бокам оставляет пространства, а надо чтоб не было, и сами li растягивало, смотрю эти свойства что они еще могут.

Тут подробно об этом https://basicweb.ru/css/css_pr_justify-content.php

Я так понимаю, этими свойствами мою задачу не решить.

[Мила Шмадченко]

Чтобы li растягивало посмотрите свойство flex-grow:

ul.dropdown {
display: flex;
}

ul.dropdown li {
flex-grow: 1;
}

[Антон Вебсайтовский]

Мила Шмадченко, да уже замутил, https://jsfiddle.net/b74mc8y2/2/
Хорошие свойства.