Создание горизонтального CSS меню для сайта
Пример 3. Красивое горизонтальное CSS меню для сайта
или как сделать CSS меню для сайта без использования изображения
- Главная О нашем проекте
- Справочник CSS справочник
- CSS уроки Для начинающих
- CSS меню Создаем меню
HTML код меню:
Пример 4. Горизонтальное меню для сайта CSS методами
или как сделать CSS меню для сайта без использования изображения
HTML код меню:
Автор проекта — Вася Митин | Дата публикации: Апрель 2010 | Обновление: Ноябрь 2018
Скругляем CSS углы Как сделать красивое горизонтальное CSS меню
© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Создание CSS меню? – Не вопрос!
Как сделать резиновое CSS Grid горизонтальное меню независимо от количества элементов?
Это меню рассчитано на 5 элементов, когда я добавляю 6-ой он съезжает на 2 ряд, что мне не нужно.
При этом если уменьшать ширину страницы то верхний ряд ведёт себя как нужно, плюс если для ширины меню не хватает места, появляется горизонтальная полоса прокрутки, что мне и нужно.
Если в свойстве «grid-template-columns» заменить 20% на auto, пока элементы могут быть больше 100px всё отлично, если сузить страничку, то они начинают съезжать в ряды ниже, мне это не нужно, нужен железно 1 ряд.
Как сделать резиновое CSS Grid горизонтальное меню независимо от количества элементов и не зависеть от высчитывания 20%, т.е. (100% / (количество элементов в меню))?
Flexbox и JS не предлагать, нужен Grid.
- Вопрос задан более трёх лет назад
- 3698 просмотров
Комментировать
Решения вопроса 1
Как сделать резиновое CSS Grid горизонтальное меню независимо от количества элементов?
Задать размер для автоматически добавляемых колонок через grid-auto-columns: minmax(100px, 20%); и добавление новых элементов в колонки через grid-auto-flow: column;
Можете добавлять сколько угодно колонок