Горизонтальное меню justify

24.01.2019

8876

В отличии предыдущего меню, где есть отступы у каждого элемента, часто возникает задача сделать резиновое меню без них. Пункты меню должно идти с одинаковыми интервалами и без отступов по бокам.

Сделать его можно с помощью text-align: justify и псевдо-свойств :before и :after.

Пример 1

<div class="menu">
	<div class="wrp">
		<ul>
			<li><a href="#">Каталог</a></li>
			<li><a href="#">Акции</a></li>
			<li><a href="#">Отзывы</a></li>
			<li><a href="#">Контакты</a></li>
		</ul>
	</div>
</div>

HTML

.wrp {	
	width: 600px;
	margin: 0 auto
}
.menu {
	background: #b92525;
	padding: 20px 0 0 0;
	height: 40px;
}
.menu ul {	
	text-align: justify;
	margin: 0;
	padding: 0;  
}
.menu ul:before{
	content: '';
	display: block;
	width: 100%;
	height: 0;
}
.menu ul:after {
	content: '';
	width: 100%;
	height: 0;
	visibility: hidden;
	overflow: hidden;
	display: inline-block;
}
.menu li {	
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
}
.menu a {
	font-size: 16px;
	color: #fff;
}

CSS

Пример 2

Добавление разделителей между пунктами меню.

<div class="menu">
	<div class="wrp">
		<ul>
			<li><a href="#">Каталог</a></li>
			<li><span></span></li>
			<li><a href="#">Акции</a></li>
			<li><span></span></li>
			<li><a href="#">Отзывы</a></li>
			<li><span></span></li>
			<li><a href="#">Контакты</a></li>
		</ul>
	</div>
</div>

HTML

.wrp {	
	width: 600px;
	margin: 0 auto
}
.menu {
	background: #b92525;
	padding: 20px 0 0 0;
	height: 40px;
}
.menu ul {	
	text-align: justify;
	margin: 0;
	padding: 0;  
}
.menu ul:before{
	content: '';
	display: block;
	width: 100%;
	height: 0;
}
.menu ul:after {
	content: '';
	width: 100%;
	height: 0;
	visibility: hidden;
	overflow: hidden;
	display: inline-block;
}
.menu li {	
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
}
.menu a {
	font-size: 16px;
	color: #fff;
}
.menu span {			
	display: inline-block;
	width: 8px;
	height: 8px;
	background: url(/img/menu-marker.png) 0 0 no-repeat;
}

CSS