Равномерное распределение элементов списка <li>

Tartyga · May 8, 2011

Здравствуйте.

Имеется простое горизонтальное меню:


<ul style="width:800px">
  <li>Home</li>
  <li>About</li>
  <li>.....</li>
</ul>

Задана фиксированная ширина.

Как правильно средствами css равномерно распределить <li>?

psywalker · May 8, 2011

http://forum.htmlbook.ru/index.php?showtopic=20735

Tartyga · May 8, 2011

http://forum.htmlbook.ru/index.php?showtopic=20735

Премного благодарен, материал интересный, но к сожалению не совсем то. Моя вина, не конкретизировал, что мне нужно.

Дело в том, что мне нужно равномерное распределение в самих <li>, то есть, чтобы элементы прилегали друг к другу, а расстояние между краями элементов и ссылками внутри них равномерно распределялось.

Softlink · May 8, 2011

http://forum.htmlbook.ru/index.php?showtopic=20735
Премного благодарен, материал интересный, но к сожалению не совсем то. Моя вина, не конкретизировал, что мне нужно.
Дело в том, что мне нужно равномерное распределение в самих <li>, то есть, чтобы элементы прилегали друг к другу, а расстояние между краями элементов и ссылками внутри них равномерно распределялось.

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

Какое вам надо выравнивание? Сделайте выравнивание в ячейке по центру и все.

li {text-align:center;}

psywalker · May 8, 2011

Дружище, нарисуй, что тебе нужно.

Tartyga · May 8, 2011

Дружище, нарисуй, что тебе нужно.

Примерно вот так:

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

Temiks · May 8, 2011

1. можно сделать таблицей

2. если четыре ячейки, то задать яцейке ширину в 25%, а бордюры указать на ссылку дав ей при этом display: block;

Edited May 8, 2011 by Temiks

buddah · May 8, 2011

*{
	margin:0;
	padding:0;
}
.page{
	margin:0 auto;
	width:995px;
}
ul{
	list-style:none;
	width:100%;
	height:40px;
	background:#000 url(images/bg-nav.gif) top left repeat-x;
}
ul li{
	float:left;
	border-right:1px solid #333;
}
ul li a{
	display:block;
	height:40px;
	padding:0 35px;
	float:left;
	text-transform: uppercase;
	font:70%/40px Helvetica,"microsoft sans serif",arial,sans-serif;
	color:#fff;
	text-decoration:none;
	text-align:center;
}
ul li a:hover,
ul li.active a{
	background:url(images/bg-button.gif) top left repeat-x;
}

Вот пример

Edited May 8, 2011 by buddah

Temiks · May 8, 2011

buddah

что то не работает

можно сделать вот так


<!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">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link type="text/css" href="css/style.css" rel="stylesheet" />
        <style type="text/css" >
            html, body {
                height: 100%;
                padding: 0;
                margin: 0;
            }
             ul {
                 list-style-type: none;
                 padding: 0;
                 margin: 0;
             }
             li {
                 padding: 0;
                 margin: 0;
                 float: left;
                 min-width: 25%;
                 height: 50px;
                 background: red;
             }
        </style>
</head>
<body>
    <ul>
        <li>
            привет
        </li>
        <li>
            привет
        </li>
        <li>
            привет
        </li>
        <li>
            привет
        </li>
    </ul>
</body>
</html>

Edited May 8, 2011 by Temiks

mishka · May 8, 2011

Либо табличкой делай, либо скрипт нужно писать.

psywalker · May 8, 2011

Либо табличкой делай, либо скрипт нужно писать.

Медвежон, а как жс сможет помочь?

mishka · May 8, 2011

Либо табличкой делай, либо скрипт нужно писать.
Медвежон, а как жс сможет помочь?

узнать общую ширину, узнать ширины текстовых узлов елементов, и пропорционально задать ширины лишкам.

navWidth - общая ширина.

navElWidth - общая ширина текстовых узлов меню.

k = navWidth / navElWidth - коефициент расширения.

li.width = navEl.width * k

как-то так, мог запутаться в арифметике, но идея такова.

это применимо к фиксированному макету.

psywalker · May 8, 2011

Либо табличкой делай, либо скрипт нужно писать.
Медвежон, а как жс сможет помочь?
узнать общую ширину, узнать ширины текстовых узлов елементов, и пропорционально задать ширины лишкам.
так вот.

а как бы ты узнавал ширину текстовых узлов?

buddah · May 8, 2011

Temiks: можно не задавать общую ширину и выводить по центру.

Или как ты написал, но тогда при 6 пунктах меню - что задавать?

Или уходить в дебри JS.

mishka · May 8, 2011

а как бы ты узнавал ширину текстовых узлов?

Да хоть в спан завернуть, над более универсальным способом еще не думал. Так как это все навскидку написал, и сам такого не делал.

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

Temiks · May 8, 2011

Temiks: можно не задавать общую ширину и выводить по центру.
Или как ты написал, но тогда при 6 пунктах меню - что задавать?
Или уходить в дебри JS.

если 6 то таблицей, а если списком и 6 ячеек то 100 : 6 = 16.66%, но наверное так не получится

mishka · May 8, 2011

Temiks: можно не задавать общую ширину и выводить по центру.
Или как ты написал, но тогда при 6 пунктах меню - что задавать?
Или уходить в дебри JS.
если 6 то таблицей, а если списком и 6 ячеек то 100 : 6 = 16.66%, но наверное так не получится

Угу, тут опера напартачит.

Хотя можно нормальным браузерам: ul { display: table } li { display: table-cell }

а для ие ширину в процентах, он то нормально дробные проценты понимает.

psywalker · May 8, 2011

а как бы ты узнавал ширину текстовых узлов?
Да хоть в спан завернуть, над более универсальным способом еще не думал. Так как это все навскидку написал, и сам такого не делал.
Хотя можно и у линки ширину узнать, главное паддингов боковых ей не задавать.

Ну да, я тоже так думал, в общем, если что навояю, приглашу в скайп :rolleyes:

Tartyga · May 8, 2011

Спасибо всем за помощь.

Либо табличкой делай, либо скрипт нужно писать.

Изначально я и делал табличкой, однако в ячейке также не пропорционально распределяется пустое пространство. Получается, что чем длиннее слово тем больше и пространство до края ячейки:

psywalker · May 8, 2011

Ну это походу только с помощью ЖС можно сделать.

Temiks · May 8, 2011

можно попробовать установить мин ширину ячейке таблице + padding + ссылке указать padding? или можно даже без указания padding ссылке, правда тогда придется вешать еще один класс где будет не одно слово

Edited May 8, 2011 by Temiks

mishka · May 8, 2011

Протестируйте пожалуйста.

Особенно буду рад замечаниям s0rr0w, GreatRash. И по коду, и по логике.

Остальные тоже стороной не обходите.

<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>autoscalingNav</title>
	<style type="text/css">
		.menu {
			width: 800px;
			margin: 50px auto;
			padding: 0;
			list-style: none;
			border: 2px solid #2d67f9;
			border-radius: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			-o-border-radius: 10px;
			font: 18px/24px Verdana, Arial, Helvetica, sans-serif;
		}
		.menu:after {
			content: '';
			display: block;
			clear: both;
		}
		.menu li {
			float: left;
			white-space: nowrap;
		}
		.menu a {
			zoom: 1;
			display: block;
			text-align: center;
			border-left: 2px solid #2d67f9;
			background: #aee6ff;
			color: #000;
			padding: 5px 0;
			text-decoration: none;
		}
		.menu a:hover { background: #0087ff; }
		.menu .first-child a {
			border: 0;
			border-radius: 8px 0 0 8px;
			-webkit-border-radius: 8px 0 0 8px;
			-moz-border-radius: 8px 0 0 8px;
			-o-border-radius: 8px 0 0 8px;
		}
		.menu .last-child a {
			border-radius: 0 8px 8px 0;
			-webkit-border-radius: 0 8px 8px 0;
			-moz-border-radius: 0 8px 8px 0;
			-o-border-radius: 0 8px 8px 0;
		}
		.js-init .menu a { display: inline; }
	</style>
	<script type="text/javascript">
		var autoscalingNav = {
			init: function ( o ) {
				var settings = {
					list: 'nav',
					fill: 'rateably', // rateably | equally
					minSide: 10,
					sideClass: false // false | true
				}

				if ( typeof ( o ) == 'object' ) for ( var key in o ) settings[key] = o[key];

				this.list = ( typeof settings.list === 'object' ) ? settings.list : document.getElementById ( settings.list );
				this.fill = settings.fill;
				this.minSide = settings.minSide;
				this.elem = this.list.children;

				if ( settings.sideClass ) {
					if ( this.elem[0].className.indexOf ( 'first-child' ) < 0 ) this.elem[0].className += ' first-child';
					if ( this.elem[this.elem.length - 1].className.indexOf ( 'last-child' ) < 0 ) this.elem[this.elem.length - 1].className += ' last-child';
				}

				this.scaling ();
			},
			scaling: function () {
				document.body.className += ' js-init';
				var _listWidth = this.list.clientWidth,
					_elWidth = 0,
					_newWidth = 0,
					_equally = 0,
					_equallyNum = this.elem.length,
					_equallyW = parseInt ( _listWidth / _equallyNum, 10 ),
					_equallySumW = _listWidth;

				for ( var i = this.elem.length - 1; i >= 0; i-- ) {
					_elWidth += this.elem[i].clientWidth;
					if ( this.elem[i].clientWidth + this.minSide * 2 >= _equallyW && this.fill == 'equally' ) {
						this.elem[i].style.width = this.elem[i].clientWidth + this.minSide * 2 + 'px';
						this.elem[i].maxEqu = true;
						_equallySumW -= this.elem[i].clientWidth;
						_equallyNum--;
					}
				}

				var _Kw = _listWidth / _elWidth,
					_postW = _listWidth - _elWidth;

				if ( _Kw < 0 ) return;

				switch ( this.fill ) {
					case 'rateably':
						var _delta = parseInt ( ( _postW / this.elem.length ), 10 );
						for ( var j = this.elem.length - 1; j >= 0; j-- ) this.elem[j].style.width = this.elem[j].clientWidth + _delta + 'px';
						for ( var k = this.elem.length - 1; k >= 0; k-- ) _newWidth += this.elem[k].clientWidth;
						var _pW = _listWidth - _newWidth, l = 0;
						while ( _pW > 0 ) {
							this.elem[l].style.width = ( this.elem[l].clientWidth + Math.ceil ( ( _listWidth - _newWidth ) / this.elem.length ) ) + 'px';
							_pW -= Math.ceil ( ( _listWidth - _newWidth ) / this.elem.length );
							l++;
						}
						break;

					case 'equally':
						var _addEquallyW = parseInt ( _equallySumW / _equallyNum, 10 );
						for ( var m = this.elem.length - 1; m >= 0; m-- ) if ( !this.elem[m].maxEqu ) this.elem[m].style.width = _addEquallyW + 'px';
						for ( var k = this.elem.length - 1; k >= 0; k-- ) _newWidth += this.elem[k].clientWidth;
						var _pWe = _listWidth - _newWidth, l = 0;
						while ( _pWe > 0 ) {
							this.elem[l].style.width = ( this.elem[l].clientWidth + Math.ceil ( ( _listWidth - _newWidth ) / this.elem.length ) ) + 'px';
							_pWe -= Math.ceil ( ( _listWidth - _newWidth ) / this.elem.length );
							l++;
						}
						break;
				}
				document.body.className = document.body.className.replace ( ' js-init', '' );
			}
		}

		function initPage () {
			autoscalingNav.init ({
				list: 'nav',
				sideClass: true,
				fill: 'rateably'
			});
			autoscalingNav.init ({
				list: 'nav2',
				sideClass: true,
				fill: 'equally'
			});
		}

		if (window.addEventListener) window.addEventListener("load", initPage, false);
		else if (window.attachEvent && !window.opera) window.attachEvent("onload", initPage);
	</script>
</head>
<body>
	<ul id="nav" class="menu">
		<li><a href="#">lik</a></li>
		<li><a href="#">lins</a></li>
		<li><a href="#">li</a></li>
		<li><a href="#">linkasaa</a></li>
		<li><a href="#">linkss</a></li>
		<li><a href="#">linkss</a></li>
		<li><a href="#">linkasasaafghdt</a></li>
	</ul>
	<ul id="nav2" class="menu">
		<li><a href="#">lik</a></li>
		<li><a href="#">lins</a></li>
		<li><a href="#">li</a></li>
		<li><a href="#">linkasaa</a></li>
		<li><a href="#">linkss</a></li>
		<li><a href="#">linkss</a></li>
		<li><a href="#">linkasasaafghdt</a></li>
	</ul>
</body>
</html>

psywalker · May 8, 2011

mishka2

Т.е. я могу рядом поставить таблицу и будет один в один?

Поставил таблицу, всё по другому.

Видимо тут идея в другом?

mishka · May 8, 2011

fill: 'rateably' - одинаковые отступы от текста до бордеров.

fill: 'equally' - элементы стремятся быть одинаковыми по ширине.

psywalker · May 8, 2011

fill: 'rateably' - одинаковые отступы от текста до бордеров.
fill: 'equally' - элементы стремятся быть одинаковыми по ширине.

А зачем столько кода?

Вот например накидал вариант, даже к резинке подходит.

http://psywalker.ru/Forum/JS/Primitive/Dom-Zadachi/TableSort/LI-table2.html

mishka · May 8, 2011

fill: 'rateably' - одинаковые отступы от текста до бордеров.
fill: 'equally' - элементы стремятся быть одинаковыми по ширине.
А зачем столько кода?
Вот например накидал вариант, даже к резинке подходит.
http://psywalker.ru/Forum/JS/Primitive/Dom-Zadachi/TableSort/LI-table2.html

сделай кроссбраузерный! аналог моего и смотри сколько кода будет.

Sign In

Равномерное распределение элементов списка <li>

Question

Link to comment

Share on other sites

33 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information