Растянутый на всю ширину HTML список

20 июля 2014 Антон Кулешов 1405 0

Использовать HTML список можно по разному, но, несомненно, чаще всего его применяют при создании меню для сайта. Дизайнерская мысль в этом направлении бьет ключом, а верстальщику приходится приспосабливаться, орудуя не столь многочисленным набором инструментов. С проблемой красивого вписания меню в уже заданные габариты, я и столкнулся совсем недавно.

Реклама

Суть задачи была в том, чтобы создать горизонтальное меню, в котором первый и последние элементы будут прижаты к краям, а все внутренние - равномерно распределены на всю ширину блока.

Решение было найдено следующее.

Используем стандартную структуру списка:

<div id="wrapper">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

Такое горизонтальное меню будет вот с таким CSS:

#wrapper{
	margin: 0 auto;
	background: #95C5A8;
	padding: 15px;
}
	#wrapper ul{
		text-align: justify;
		height: 160px;
		margin: 0;
		padding: 5px;
		outline: 2px solid blue;
		overflow: hidden;
	}
	#wrapper ul:after{
		content: "";
		width: 100%;
		display: inline-block;
	}
		#wrapper ul li{
			width: 120px;
			height: 160px;
			background: url(akb.png) no-repeat 50% 50%;
			outline: 2px solid red;
			display: inline-block;
		}

В итоге должна получиться вот такая картина:

li-ravnomerno-raspredeleny-na-vsyu-shirinu

Особое внимание следует уделить следующим строкам:

#wrapper ul{
	text-align: justify;
	overflow: hidden;
}
#wrapper ul:after{
	content: "";
	width: 100%;
	display: inline-block;
}
	#wrapper ul li{
		display: inline-block;
	}

В них-то и заключается вся суть решения данной задачи.

Вот такой интересный способ и, при этом очень, простой в реализации. В большинстве случаев это одно из лучших решений для горизонтального меню.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Анимация занавеса, hover effects

13 февраля 2015 Антон Кулешов

Сегодня поговорим об «украшательствах» и рассмотрим довольно интересную анимацию при наведении на картинку (картинку беру как пример, в реальности эффект можно использовать на чем угодно), а также познакомимся с библиотекой MooTools.

О том, как скачать видео с Ютуба и Вк

27 января 2016 Антон Кулешов

Оставим ненадолго серьёзные темы аутентификаций через социальные сети и сегодня я расскажу об очень приятном сервисе, который позволяет скачивать аудио и видео контент там, где это невозможно стандартными методами. Кнопка скачать попросту отсутствует на Ютубе, ВКонтакте, Фейсбук и куче других популярных сервисов. Конечно, продвинутый пользователь может скачать видео или аудио стандартными средствами браузера, но это сложно.

Разбираемся, как сделать бегущую строку на сайте

21 января 2015 Антон Кулешов

Если у вас бурно развивающийся блог или информационный сайт, и новые посты появляются довольно часто, то пользователю необходимо как-то сообщать о наиболее важных и «горячих» новостях. Использовать модные ныне слайдеры не совсем для этого удобно, поэтому сегодня мы поговорим о том, как сделать бегущую строку на сайте. Для этого мы используем очень простой плагин на jQuery.