Выравнивание элементов списка (меню) по ширине, HTML+CSS

Иногда необходимо, чтоб меню точно выравнивалась по ширине. Тут на помощь приходят несколько замечательных приёмов, найденных мной на одном из форумов

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Test</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
		}
		
		ul {
			list-style: none;
			text-align: justify;
			text-justify: newspaper;
			line-height: 0;
		}
		
		li {
			display: -moz-inline-box;
			display: inline-block;
			vertical-align:top;
			text-align: center;
			background: red;
		}
		
		li.helper {
			width: 100%;
			background: none;
		}
	</style>
	
	<!--[if lte IE 7]>
		<style type="text/css">
			ul {
				width: 99.9%;
				text-align-last: justify;
			}
			
			li {
				display: inline;
			}
			
			li.helper {
				display: none;
			}
		</style>
	<![endif]-->
</head>

<body>
	
	<ul>
		<li>home</li>
		<li>about us</li>
		<li>contacts</li>
		<li>some other link</li>
		<li class="helper"></li>
	</ul>
	
</body>
</html>

Добавить комментарий

Ваш e-mail не будет опубликован.