Как разместить элементы списка горизонтально

Элементы списка (тег <ul>) по умолчанию располагаются вертикально:

  • Элемент #1
  • Элемент #2
  • Элемент #3

Есть несколько способов как можно изменить вертикальное расположение на горизонтальное. Самое распространенное это с помощью свойства CSS display со значением inline (допускается также inline-block) у тега <li>. Помимо этого, можно использовать свойство CSS float.

Рассмотрим все варианты создания горизонтального списка на примерах.

Примеры с горизонтальным списом

Пример 1. Горизонтальный список display: inline

<html>
<head>
<style>
ul.spisok_ver1{
margin: 3px;
padding: 3px;
}
ul.spisok_ver1 li{
display: inline;
margin-right: 3px;
border: 1px solid #555;
padding: 5px;
}
</style>
</head>
<body>
<ul class="spisok_ver1">
<li>Элемент #1</li>
<li>Элемент #2</li>
<li>Элемент #3</li>
<li>Элемент #4</li>
</ul>
</body>
</html>

Вот как это выглядит на странице:

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





Пример 2. Простое горизонтальное меню

Здесь мы будем применять свойство display: inline-block для задания блочности элементам.

<html>
<head>
<style>
ul.primer_menu{
margin: 3px;
padding: 3px;
}
ul.primer_menu li {
margin: 0;
padding: 0;
text-align: center;
background: #4876FF;
display: inline-block;
font-size: 18px;
}
ul.primer_menu li a{
color: white;
display: block;
padding: 7px 20px;
text-decoration: none;
}
ul.primer_menu li:hover {
background: #B22222;
color: #fff;
}
</style>
</head>
<body>
<ul class="primer_menu">
<li><a href="index.html">Главная</a></li>
<li><a href="/production/">Каталог</a></li>
<li><a href="/otzyvy/">Отзывы</a></li>
<li><a href="/about/">О компании</a></li>
<li><a href="/contact/">Контакты</a></li>
</ul>
</body>
</html>

Вот как это выглядит на странице:

  • Главная
  • Каталог
  • Отзывы
  • О компании
  • Контакты

Пример 3. Через свойство float:left

Этот способ применяется не часто. С помощью выравнивания свойством float можно сделать горизонтальное расположение списка. В примере приведено выравнивание по левому краю. Можно сделать также выравнивание по правому краю (float:right)

<html>
<head>
<style>
ul.spisok_ver3{
overflow: hidden;
}
ul.spisok_ver3 li{
border: 1px solid #000;
display: block;
float: left;
padding: 3px;
margin-left: 5px;
}
</style>
</head>
<body>
<ul class="spisok_ver3">
<li>Элемент #1</li>
<li>Элемент #2</li>
<li>Элемент #3</li>
<li>Элемент #4</li>
</ul>
</body>
</html>

Вот как это выглядит на странице:

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




Читайте также:

• Коды символов для HTML

• Как убрать маркеры в маркированном списке

• Как сделать нумерованный список

• Как добавить кнопку "Наверх" на сайте

• Как сделать выпадающие меню

• Как сделать якорь ссылки

• Как сделать форму обратной связи на php с каптчей

• Как скруглить углы в HTML через CSS

• Как изменить вид ссылки при наведении

• Что такое микроразметка сайта

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.