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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от emanuel_boyer , 3 года назад

Сделать горизонтальный список в HTML, можно так:


1
2
3
4
5
6
<body>
<ul>
    <li style="display: inline">Главная</li>
    <li style="display: inline">Меню</li>
    <li style="display: inline">О Нас</li>
</ul>


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

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

@angelica.glover 

Для создания горизонтального списка в HTML можно использовать тег <ul> и добавить к нему стиль display: inline-block;. Пример кода:

1
2
3
4
5
<ul style="display: inline-block;">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>


Или можно использовать тег <ol> с тем же стилем:

1
2
3
4
5
<ol style="display: inline-block;">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ol>


Но лучше использовать для этой цели специализированный тег <nav> и специализированный стиль CSS:

1
2
3
4
5
6
7
<nav>
  <ul>
    <li> <a href="#">Пункт 1</a> </li>
    <li> <a href="#">Пункт 2</a> </li>
    <li> <a href="#">Пункт 3</a> </li>
  </ul>
</nav>


1
2
3
4
5
6
7
8
9
nav > ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav > ul > li {
  margin-right: 15px;
}