перенос строки при li {display: table-cell}

[rondew]

привет.

есть li с назначенным фоновым изображением (иконка). чтобы прижать текст к низу блока, сделал display: table-cell; теперь при добавлении более одного элемента списка, все они выстраиваются в одну строчку. а нужно, чтобы по одному элементу в строке. как корректно растянуть строки в этом случае? привожу код:

#maincontent div.downloads ul {
	padding-left: 0;
	text-align: justify;
}
#maincontent div.downloads ul li {
	display: table-cell;
	list-style: none;
	background: url("/images/pdf.png") no-repeat;
	height: 32px;
	padding-left: 32px;
	padding-bottom: 0.5em;
	vertical-align: bottom;
	font-size: 120%;
}

заранее спасибо.

[acid]

Попробуйте так:

#maincontent div.downloads ul {
	padding-left: 0;
	text-align: justify;
}
#maincontent div.downloads ul li {

	list-style: none;
	background: url("/images/pdf.png") no-repeat;

	padding-left: 32px;
	padding-bottom: 0.5em;

	font-size: 120%;
	padding-top: Xpx;		  // X - высота картинки
}

Убираем:

height, display, vertical-align

Добавляем в стиль li:

padding-top: Xpx; // X - высота картинки

[rondew]

Убираем:

height, display, vertical-align

Добавляем в стиль li:

padding-top: Xpx; // X - высота картинки

я именно так изначально и хотел прижимать к нижней границе блока. но у такого способа есть минус — если строка длиннее ста процентов, то не произойдет корректного переноса. в случае с table-cell получается очень удобно и красиво.

неужели нельзя заставить li не прилипать друг к другу? очень надеюсь, что такой способ все же есть.

[rondew]

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

[Serlutin]

table-cell это ячейка таблицы. Вы видели, как ячейки в таблице выстраиваются?

если строка длиннее ста процентов, то не произойдет корректного переноса

Почему? Что значит корректный перенос.

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

[rondew]

table-cell это ячейка таблицы. Вы видели, как ячейки в таблице выстраиваются?

Почему? Что значит корректный перенос.

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

видел. но ячейку можно слить со следующей и растянуть на 100%. здесь же у меня это не работает.

вот, смотрите:

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