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

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

от richard , в категории: HTML/CSS , 7 месяцев назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от hanna_jacobson , 3 месяца назад

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


Чтобы сделать список горизонтальным, вы можете использовать стили CSS. Например, вы можете добавить следующий код в тег <style> внутри тега <head> вашего HTML-документа:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #ddd;
}

li a.active {
  background-color: #4CAF50;
  color: white;
}


Затем, вы можете использовать этот стиль для вашего списка:

1
2
3
4
5
<ul>
  <li><a href="#">Элемент 1</a></li>
  <li><a href="#">Элемент 2</a></li>
  <li><a href="#">Элемент 3</a></li>
</ul>


Этот код создаст горизонтальный список с тремя элементами.