Выравнивание элементов списка

@ArkadySPb · Регистрация: 19.01.2014

Author24 — интернет-сервис помощи студентам

Привет,

Занимаюсь сайтом: http://www.czecharound.com/

В меню справа есть список ul/li. Как настроить отображение текста так, чтобы иконка осталась слева, а текст справа от нее был друг по другом (т.е. в одну колонку).

Спасибо за советы!

@Academik · 20.01.2014, 04:19

Наверно тут

CSS

1	#ca_slider .ca_category .ca_category_list li { display:block; float:left; width:45%; margin-left:5%; padding:12px 0px 0px 0px; /line-height:13px !important; /}

Убрать

CSS

1	float:left; width:45%;

И display:block; тут вообще не нужен, потому как элемент <li> и так блочный элемент.

@newJS · 20.01.2014, 06:17

А float:left; и display:block; в паре не имеют смысла.
А зачем флоат для ли, тоже не понятно.

@Academik · 20.01.2014, 06:19

newJS, как непонятно? чтоб вывести их в 2 столбца в данном случае.

@newJS · 20.01.2014, 06:25

Сообщение от 35cm

как непонятно?

Аааааа, вот оно че, у меня страница не загрузилась, не увидел как оно там расположено.

@ArkadySPb · 21.01.2014, 01:28 **[ТС]**

35cm, спасибо за помощь!
Но я имел ввиду несколько другое.
Мне нужно чтобы меню было в 2 стобца, но при переносе слов они выравнивались по левому краю.
Т.е. в случае с "Активный отдых", чтобы при переносе слова "отдых" буква "о" была бы под "А".

@belovw · 21.01.2014, 04:20

"Активный отдых" возьмите в <p></p> и img дайте float:left;

Добавлено через 2 минуты
Так же vertical-align: middle; не будет работать. Это свойство применяется к дивам.

@ArkadySPb · 21.01.2014, 23:01 **[ТС]**

Сообщение от belovw

"Активный отдых" возьмите в <p></p> и img дайте float:left;

Добавлено через 2 минуты
Так же vertical-align: middle; не будет работать. Это свойство применяется к дивам.

Спасибо за помощь! Сделал как посоветовал, но теперь все сползло - появился пробел. Можно ли его как то убрать?

@Academik · 22.01.2014, 00:45

CSS

1	.ca_category_list li p{margin: 0;}

@ArkadySPb 0 / 0 / 0 Регистрация: 19.01.2014 Сообщений: 3
		1
	Выравнивание элементов списка 19.01.2014, 22:18. Показов 1617. Ответов 8 Метки нет (Все метки) Привет, Занимаюсь сайтом: http://www.czecharound.com/ В меню справа есть список ul/li. Как настроить отображение текста так, чтобы иконка осталась слева, а текст справа от нее был друг по другом (т.е. в одну колонку). Спасибо за советы! 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	20.01.2014, 06:17	3
	А float:left; и display:block; в паре не имеют смысла. А зачем флоат для ли, тоже не понятно. 0

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,737
	20.01.2014, 06:19	4
	newJS, как непонятно? чтоб вывести их в 2 столбца в данном случае. 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	20.01.2014, 06:25	5
	Сообщение от 35cm как непонятно? Аааааа, вот оно че, у меня страница не загрузилась, не увидел как оно там расположено. 0

@ArkadySPb 0 / 0 / 0 Регистрация: 19.01.2014 Сообщений: 3
	21.01.2014, 01:28 [ТС]	6
	35cm, спасибо за помощь! Но я имел ввиду несколько другое. Мне нужно чтобы меню было в 2 стобца, но при переносе слов они выравнивались по левому краю. Т.е. в случае с "Активный отдых", чтобы при переносе слова "отдых" буква "о" была бы под "А". 0

@belovw 50 / 18 / 5 Регистрация: 20.08.2013 Сообщений: 162
	21.01.2014, 04:20	7
	"Активный отдых" возьмите в <p></p> и img дайте float:left; Добавлено через 2 минуты Так же vertical-align: middle; не будет работать. Это свойство применяется к дивам. 1

@ArkadySPb 0 / 0 / 0 Регистрация: 19.01.2014 Сообщений: 3
	21.01.2014, 23:01 [ТС]	8
	Сообщение от belovw "Активный отдых" возьмите в <p></p> и img дайте float:left; Добавлено через 2 минуты Так же vertical-align: middle; не будет работать. Это свойство применяется к дивам. Спасибо за помощь! Сделал как посоветовал, но теперь все сползло - появился пробел. Можно ли его как то убрать? 0

	22.01.2014, 00:45