Коротко: сделать список в строчку можно через display: flex (пункты в ряд), inline-block (старый способ) или колонками через columns (для длинных списков). Обязательно убрать маркеры и отступы. Для меню, тегов и хлебных крошек чаще всего берут flex с gap.
Способы выстроить в строку
| Способ | Когда подходит |
|---|---|
display: flex |
меню, крошки, теги — основной вариант |
inline-block |
простая строка без flex (устаревшее) |
columns: 3 |
длинный список в несколько колонок |
grid в ряд |
строгая сетка плиток |
Вкладки: примеры
ul.row {
display: flex;
flex-wrap: wrap; /* перенос на новую строку */
gap: 12px;
list-style: none;
margin: 0;
padding: 0;
}Универсальный вариант: строка с одинаковыми промежутками и переносом. Подходит почти везде.
.crumbs { display: flex; gap: 8px; list-style: none; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: #bbb; }Хлебные крошки: список в строку с разделителями между пунктами. Разделитель делают псевдоэлементом, чтобы он не был частью текста ссылки.
ul.two-col {
columns: 2;
column-gap: 32px;
list-style: none;
padding: 0;
}Если пунктов много, а по вертикали они не влезают — раскладывают по колонкам. Это не «строка», но тоже убирает «простыню» вниз.
ul.inline li { display: inline-block; margin-right: 12px; }
ul.inline { list-style: none; padding: 0; }Старый способ. Минус — «невидимые» пробелы между пунктами из переносов строк. Flex таких проблем не имеет.
flex-wrap «вылезает» за экран на телефоне. Если пунктов может быть много, всегда добавляйте перенос или прокрутку (overflow-x: auto).Практика: список в строку
- Обнулите
list-style,padding,marginу списка. - Задайте
display: flexиgap. - Добавьте
flex-wrap: wrap, если пунктов много. - Выровняйте пункты по вертикали через
align-items. - Добавьте разделители или «пилюли» при необходимости.
- Проверьте на узком экране.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Пункты в столбик | нет display: flex |
добавить flex |
| Слева пустота | остался padding-left |
padding: 0 |
| Прокрутка вбок | нет переноса | flex-wrap: wrap |
| Пробелы между inline-block | переносы в HTML | использовать flex |
Проверьте себя
Вопросы и ответы
Flex со переносом, а каждому пункту — фон, отступы и border-radius: 999px. Так получаются «таблетки».
margin-left: auto у этого пункта. Часто применяют в шапке: меню слева, кнопка «Войти» справа.
Когда пунктов много и они текстовые (например, список характеристик). В строку такое влезет плохо, а в две колонки — хорошо.
Маркеры при display: flex обычно не отображаются, но правило всё равно ставят — для надёжности и читаемости кода.
Итоги
- Строка из списка —
display: flex+gap. - Уберите
list-style,padding,margin. - Для многих пунктов — перенос или прокрутка.
- Разделители и «пилюли» — через псевдоэлементы и фон.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.