Как список выровнять по горизонтали в css?

Пользователь

от eudora , в категории: HTML/CSS , 3 года назад

Как список выровнять по горизонтали в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от wilburn , 2 года назад

@eudora 

Чтобы выровнять список по горизонтали в CSS, вы можете использовать свойство display: inline-block для элементов списка. Например:

1
2
3
li {
  display: inline-block;
}


Это свойство преобразует элементы списка в блоки с возможностью выравнивания по горизонтали. По умолчанию элементы списка отображаются как блоки, которые занимают всю ширину родительского элемента и размещаются друг под другом.


Вы также можете использовать свойство text-align для родительского элемента списка, чтобы выровнять список по центру, правому краю или левому краю:

1
2
3
ul {
  text-align: center; /* выравнивание по центру */
}


1
2
3
ul {
  text-align: right; /* выравнивание по правому краю */
}


1
2
3
ul {
  text-align: left; /* выравнивание по левому краю (по умолчанию) */
}


Обратите внимание, что этот подход может раб

Пользователь

от ransom_homenick , 2 года назад

@eudora 

Для выравнивания списка по горизонтали в CSS можно использовать свойство "display" и "text-align".


Вот пример CSS-кода, который выровняет список по горизонтали:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
ul {
  display: flex; /* устанавливаем flex-контейнер */
  justify-content: center; /* выравниваем по горизонтали */
  list-style: none; /* убираем маркеры */
  padding: 0; /* убираем отступы */
}

li {
  margin: 0 10px; /* добавляем небольшой отступ между элементами списка */
}


В данном примере мы используем свойство "display" со значением "flex" для установки контейнера списка в качестве гибкого контейнера. Затем мы используем свойство "justify-content" со значением "center" для выравнивания элементов списка по центру горизонтали. Для устранения стандартных отступов в списке мы установили значение "padding" на "0".


Также мы добавили свойство "margin" со значением "0 10px" для создания небольшого отступа между элементами списка. Это можно настроить по своему вкусу, чтобы соответствовать вашим потребностям.