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

20 июля 2014 Антон Кулешов 1425 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
Читайте далее

Кнопка «Добавить в избранное» на JavaScript

25 декабря 2014 Антон Кулешов

Наверняка на многих сайтах вы видели кнопку «Добавить в избранное» и у вас мог возникнуть вопрос, как реализовать у себя в проекте такой же функционал.

SMTP сервер для отправки писем с сайта если функция mail не работает

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

Довольно распространенное явление на просторах бесплатных хостингов – когда не работает функция mail() или работает как-то странно. Что же делать в этом случае? Ответ простой - воспользоваться отправкой писем через SMTP протокол, но для этого нам нужен уже готовый и написанный код. Совсем недавно подключая доменную почту на falbar, я сделал «маленькую выжимку из поисковой выдачи» и не найдя подходящего решения написал собственный класс, который, я думаю, будет полезен не только мне.

Добавляем динамические тени CSS при помощи плагина JavaScript

20 декабря 2014 Антон Кулешов

Сегодня в статье мы рассмотрим JavaScript библиотеку - shine. При её помощи вы сможете добавить к себе на сайт красивые и привлекающие внимание динамические тени (CSS при этом не надо будет прописывать вручную).