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

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

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

<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

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

<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
24.01.2019, обновлено 31.10.2019
5674

Комментарии

, чтобы добавить комментарий.

Другие публикации

Одна рамка между блоками
Несколько вариантов как схлопнуть (объединить) границы у рядом стоящих блоков.
9548
+2
Фон под текстом
С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить это можно следующими способами.
45206
+4
Манипуляции с элементами jQuery
Сборник методов jQuery для управления элементами DOM.
9052
+5
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
23544
+29
Генерация счета на оплату PDF PHP
С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf - это конвертер HTML в PDF который...
41118
+27
Описание мета-тегов
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
12370
+3