Коротко: сделать ul в строчку проще всего через display: flex с gap. Заодно нужно убрать маркеры (list-style: none) и отступы (padding: 0) у списка. Это стандартный приём для горизонтального меню, хлебных крошек и списка тегов.
Что нужно сделать
| Действие | Свойство |
|---|---|
| Убрать маркеры | list-style: none |
| Убрать отступ списка | padding: 0; margin: 0; |
| Выстроить в строку | display: flex |
| Промежутки | gap |
| Перенос при нехватке места | flex-wrap: wrap |
Вкладки: примеры
ul {
display: flex;
gap: 16px;
list-style: none;
margin: 0;
padding: 0;
}Основной способ. gap задаёт ровные промежутки между пунктами без «хитростей» с отступами.
ul li { display: inline-block; margin-right: 16px; }
ul { list-style: none; padding: 0; }Старый способ. Минус: между инлайн-блоками появляются «пробелы» из-за переносов строк в HTML. Flex надёжнее.
.menu { display: flex; gap: 24px; align-items: center; }
.menu a { text-decoration: none; color: #505050; }
.menu a:hover { color: #003F8F; }Горизонтальное меню: строка пунктов, выравнивание по центру, состояния при наведении. На мобильном обычно превращается в «бургер».
.tags {
display: flex;
flex-wrap: wrap; /* переносим на новую строку */
gap: 8px;
list-style: none; padding: 0;
}
.tags li {
background: #f3f3f3;
border-radius: 999px;
padding: 6px 12px;
}Список «пилюль»-тегов: переносится по строкам, промежутки одинаковые. Классика для меток и фильтров.
flex-wrap: wrap, для длинных списков — overflow-x: auto.Практика: список в строку
- Уберите маркеры и отступы у
ul. - Задайте
display: flexиgap. - Выровняйте пункты по вертикали через
align-items. - Добавьте
flex-wrap: wrap, если возможно много пунктов. - Оформите ссылки и состояния.
- Проверьте на узком экране — нет ли прокрутки.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Пункты остались в столбик | не задан display: flex |
добавить flex |
| Слева пустое место | остался padding-left |
padding: 0 |
| Пункты «слиплись» | нет промежутков | gap |
| Прокрутка вбок | нет переноса | flex-wrap: wrap |
Проверьте себя
Вопросы и ответы
Уберите display: flex или задайте flex-direction: column, и верните list-style, если нужны маркеры.
Из-за переносов строк в HTML они «схлопываются» в пробел. Лечится flex или удалением переносов, но flex — правильнее.
align-items: center у flex-контейнера — тогда все выровняются по одной линии.
margin-left: auto у нужного пункта или justify-content: space-between, если нужно разделить две группы.
Итоги
- Строка из списка —
display: flex+gap. - Обнулите
list-style,padding,margin. - Для многих пунктов —
flex-wrap: wrap. - На мобильных предусмотрите альтернативу горизонтальному меню.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.