Как сделать горизонтальный список в HTML?
2 ответа
от
emanuel_boyer ,
2 года назад
Сделать горизонтальный список в 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; } |
15