Как получить горизонтальный список в HTML?

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

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

Как получить горизонтальный список в HTML?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

3 ответа

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

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

@delphine_bartoletti 

Чтобы создать горизонтальный список в HTML, вы можете использовать тег <ul> (unordered list, неупорядоченный список) или <ol> (ordered list, упорядоченный список). Каждый элемент списка должен быть обернут в тег <li> (list item, элемент списка).


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<style>
  ul li {
    display: inline-block;
  }
</style>

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>


Это создаст неупорядоченный список с горизонтальными элементами. Чтобы создать упорядоченный список, замените тег <ul> на тег <ol>.


Вы также можете использовать тег <dl> (definition list, список определений) для создания горизонтального списка. В этом случае каждый элемент списка будет состоять из двух частей: терми

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

от evalyn.barrows , год назад

@delphine_bartoletti 

Для создания горизонтального списка в HTML вы можете использовать элемент "ul" (unordered list) или "ol" (ordered list) в сочетании с CSS для установки горизонтального расположения элементов.


Вот пример использования элемента "ul" с CSS:


HTML:

1
2
3
4
5
<ul class="horizontal-list">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.horizontal-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.horizontal-list li {
  display: inline;
  margin-right: 10px; /* расстояние между элементами списка */
}


В результате элементы списка будут отображаться горизонтально.

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

от alisa.bahringer , год назад

@delphine_bartoletti 

Для создания горизонтального списка в HTML вы можете использовать элементы <ul> (неупорядоченный список) или <ol> (упорядоченный список) в сочетании с CSS-свойствами.


Вот пример кода для создания горизонтального списка с использованием <ul> и CSS:


HTML:

1
2
3
4
5
<ul class="horizontal-list">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.horizontal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.horizontal-list li {
  display: inline-block;
  margin-right: 10px;
}


В данном примере мы создаем список с классом "horizontal-list", устанавливаем ему свойство list-style: none;, чтобы убрать маркеры списка, а также устанавливаем отступы для элементов списка при помощи свойства margin-right. Затем, для каждого элемента списка (<li>) мы используем свойство display: inline-block;, чтобы расположить их по горизонтали, а свойство margin-right задает промежуток между элементами.


Вы также можете использовать другие CSS-свойства для настройки внешнего вида списка (например, цвет текста, фон и т.д.) в зависимости от ваших потребностей.