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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

3 ответа

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

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

@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>


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

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

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

@richard 

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


HTML:

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


CSS:

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

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


В данном примере мы задаем <ul> элементу класс "horizontal-list" и используем CSS-свойства list-style-type: none; для удаления маркера списка и display: flex; для создания горизонтального расположения элементов.


Каждому <li> элементу (элемент списка) мы задаем свойство margin-right: 10px; для добавления промежутков между элементами списка.


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

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

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

@richard 

Для создания горизонтального списка в HTML вы можете использовать элементы <ul> и <li>, а затем применить необходимые стили CSS.


Пример кода для создания горизонтального списка:

 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
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    li {
        float: left;
    }

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



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


В этом примере стили CSS применяются к элементам <ul>, <li> и <a>. Для создания горизонтального списка устанавливается свойство float: left; для элементов <li>.