Как разместить элементы списка горизонтально через CSS (тег <ul> в HTML)

Элементы списка (тег <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 уроков и советов