Показать Меню
falbar HTML cписок

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

HTML cписок

Использовать 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 равномерно распределены на всю ширину

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

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

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

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

Подписаться на обновления

Комментариев еще не оставлено