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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

3 ответа

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

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

@dorothea_stoltenberg 

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


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

1
2
3
4
5
<ul style="display: flex">
  <li>Элемент 1</li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
</ul>


Вы также можете использовать классы и определить стили в отдельном файле стилей (CSS), чтобы избежать загромождения HTML-кода стилями. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<style>
  .horizontal-list {
    display: flex;
  }
</style>

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


Вы также можете использовать тег <nav> вместо <ul>, чтобы показать, что этот список является навигационным меню. Например:

1
2
3
<nav class="horizontal-list">
  <a href="#">Ссылка 1</a>
  <a href="#">Ссылка 2</a>


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

от clement.erdman , год назад

@dorothea_stoltenberg 

Для создания горизонтального неупорядоченного списка в HTML можно использовать стиль display: inline-block; для элементов списка. Вот пример кода:

1
2
3
4
5
  Пункт 1
  Пункт 2
  Пункт 3


Установка display: inline-block; для элементов <li> позволяет им располагаться горизонтально. Установка margin-right: 10px; добавляет небольшой отступ между пунктами списка.

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

от stephon , год назад

@dorothea_stoltenberg 

Для создания горизонтального неупорядоченного списка в HTML вы можете использовать элементы <ul> и <li>, а также применить CSS-стилизацию для его горизонтального расположения. Ниже представлен пример кода:


HTML:

1
2
3
4
5
  Элемент 1
  Элемент 2
  Элемент 3


CSS:

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

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


В CSS-классе horizontal-list мы устанавливаем стиль списка, чтобы удалить маркеры элементов. Затем мы устанавливаем свойство display для <ul> в значение flex, чтобы элементы списка были расположены горизонтально.


В CSS-классе horizontal-list li мы задаем стиль элементов списка, чтобы они отображались в строке с помощью свойства display: inline-block и добавляем небольшой отступ между элементами с помощью margin-right.


После применения CSS-стилей ваш неупорядоченный список будет отображаться горизонтально.