Элементы меню, выравнены по левому и правому краю.

pizzZ · March 10, 2010

Вступление

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

Задача

У нас есть меню, состоящее из 5 (количество пунктов может меняться) пунктов. Нужно чтобы первый пункт выл у самого левого края. А последний у правого. И расстояние между пунктами было одинаковым.

Вот пример:

|[u]Главная страница[/u]	 [u]Форум[/u]	 [u]Новости[/u]	 [u]Гостевая книга[/u]	 [u]Войти[/u]|

Где | это край к которому должны быть прибиты элементы.

Если использовать выравнивание по центру то получим:

|	 [u]Главная страница[/u]	 [u]Форум[/u]	 [u]Новости[/u]	 [u]Гостевая книга[/u]	 [u]Войти[/u]	 |

к краям.

Проблема в том что они не прибиты

Вы скажете, а что если правому задать выравнивание по правому краю, левому, по левому, а остальным по центру. Я скажу что это не подходит, так как между 1 и 2, 4 и 5 ссылкой, будет больше пространство, чем между остальными.

Плохие решения

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

Второе решение уже получше Допустим что ширина блока в который нам нужно вставить это меню, фиксированная, тогда получаем такую формулу: (Ширина блока - (количество символов в меню*среднюю ширину символа))/среднюю ширину символа/(количество пунктов меню - 1) то получим количество символов которое надо вставить между пунктами. Проблемы этого решения в том, что буквы Щ и ь имеют разную ширину... + много лишних пробелов... В общем тоже не подходит.

Третье решение. Совсем хорошо, но не радует наличие картинки...

Нашел здесь

Код:

.menu {
text-align:justify !important;
width:1000px;
background-color:#CCC;
overflow:hidden;
}
<div class="menu">
	<a href="#">Главная</a>
	<a href="#">Дизайн</a>
	<a href="#">Верстка и кодинг</a>
	<a href="#">pro100design.net</a>
	<img src="blank.gif" width="99%" height="1" alt="">
</div>

Вот что пишет автор:

"Использовать выравнивание текста justify. Если объяснять коротко, то после применения выравнивания justify все строки текста, кроме последней растягиваются на всю возможную ширину блока, по этому, для получения нужного эффекта нам нужно растянуть только одну строку. Мы добавляем длинный строковый inline элемент, который не помещается в первой строке и, следовательно, переносится на вторую, заставляя тем самым первую (наше меню) растянутся по всей ширине. В качестве такого элемента можно использовать пустой рисунок (Обычной называют blank.gif имеющий размер 1×1 пиксель) или любой строковый элемент с большим значением отступа."

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

Идеальное решение

Пока не найдено, но надеюсь, что мы его найдем.

Найденные ссылки по теме.

Блок картинок выровненный по левой и правой стороне

P,S,

Ушел дальше думать, найду решение, отпишусь здесь.

Edited March 10, 2010 by pizzZ

rus · March 10, 2010

Ширина меню фиксирована, или это резина?

Great Rash · March 10, 2010

Резина как я понимаю. Кроссбраузерных "красивых" решений на данную тему пока (пока не вступил в силу CSS3) нет. Остается юзать извраты или таблицы. Имхо таблицы предпочтительней.

Вот тут обсуждалась эта тема: http://forum.htmlbook.ru/index.php?showtopic=19452

Надеюсь поможет.

UPD: кстати, а чем вот это решение не подходит - http://www.getincss.ru/wp-content/uploads/.../elements2.html ???

Вот я на его основе замутил тестовую страничку:

<!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>

Единственное не понятно как оно работает в старых браузерах (FF2, Opera 9 и ниже, Safari 3 и ниже, и т.п.)

Sign In

Элементы меню, выравнены по левому и правому краю.

Question

pizzZ

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

rus

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information