Как разместить пункты списка горизонтально?
Пункты списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору li следует добавить стилевое свойство display со значением inline-block, оно преобразует элемент в строчно-блочный (пример 1).
Пример 1. Горизонтальный список
Результат данного примера показан на рис. 1.
Рис. 1. Горизонтальный список
Из-за того, что вокруг списка автоматически устанавливаются отступы, их желательно убрать, добавляя свойства margin и padding с нулевым значением к селектору ul.
Заметьте, что между пунктами списка появляется небольшое расстояние. Как его убрать читайте этот рецепт.
См. также
Автор и редакторы
Последнее изменение: 09.04.2020
Редакторы: Влад Мержевич