Горизонтальный список с overflow-x: scroll

AKyHuH · January 29, 2010

День добрый.

Я, как всегда, с нубо-проблемой В общем задача следующая, сделать нужно что-то типа "карусели", но средствами html+css.

Если более подробно, то... Есть плоский список (float: left; list-style: none), внутри каждого элемента списка ссылка внутри которой картинка с подписью под ней...

<ul>
<li>
<a href="#">
<img src="" alt="" />
</a>
<a href="#">
Text
</a>
</li>
...
</ul>

так вот, допустим я помещаю этот список в контейнер шириной 400px и высотой 100px (overflow-x: scroll)... далее хочу видеть плоский список своих картинок, но, если ширина списка больше 400px должна появиться горизонтальная полоса прокрутки.... добавление свойства white-space: nowrap; к UL почему-то не помогает... всё равно список переносится на следующую строку...

Edited January 29, 2010 by AKyHuH

rus · January 29, 2010

а зачем списку флоат?

MehOlOLBuC · January 29, 2010

Есть плоский список (float: left; list-style: none), внутри каждого элемента списка ссылка внутри которой картинка с подписью под ней...

объясните графически.

AKyHuH · January 29, 2010

а зачем списку флоат?

потому что список плоский.... горизонтальный... ну, можно сделать display: inline, без разницы...

объясните графически.

хм, тут нечего особенно рисовать то.... ну схематично давайте изображу...

картинка1
картинка2
картинка3

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

картинка1 картинка2 картинка3

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

psywalker · January 29, 2010

Так, а в чём проблема?

БЕрёшь див, ему оверфлоу:авто и ширину. В него уже список

shvv · January 29, 2010

Кажется, что ul нужно задать ширину. Без этого, по-моему, никак.

Плавающие блоки всегда будут переноситься на следующую строку.

AKyHuH · January 29, 2010

Так, а в чём проблема?
БЕрёшь див, ему оверфлоу:авто и ширину. В него уже список

так и сделал... но переносится и всё тут....

	<div style="overflow: auto; width: 400px; height: 100px; white-space: nowrap;">
		<ul id="friends-list">
				<li id="friend-81">
				<a href="java script:void(0);">
				<img class="avatar" src="" alt="Константинопольский Костя">
				Константинопольский Костя</a>
				<input name="invite-list[]" value="81" type="hidden">
			</li>
						<li id="friend-74">
				<a href="java script:void(0);">
				<img class="avatar" src="" alt="Tester">
				Tester</a>
				<input name="invite-list[]" value="74" type="hidden">
			</li>
						<li id="friend-80">
				<a href="java script:void(0);">

				<img class="avatar" src="" alt="Tester6">
				Tester6</a>
				<input name="invite-list[]" value="80" type="hidden">
			</li>
						 <li id="friend-78">
				<a href="java script:void(0);">
				<img class="avatar" src="" alt="Tester4">
				Tester4</a>
				<input name="invite-list[]" value="78" type="hidden">

			</li>
				 </ul>
	</div>

вот кусок кода...

методом тыка определил, что косяк в "float: left;" в списке, если ставить display: inline, то всё ок, но проблема в том, что у меня используется float: left для выравнивания подписи относительно картинки...

psywalker · January 29, 2010

сделай таблицу

AKyHuH · January 29, 2010

как вариант... хотя, не семантично ...

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

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

Edited January 29, 2010 by AKyHuH

psywalker · January 29, 2010

Так не прокатит?

<!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>
<style type="text/css">
	*{ margin: 0; padding: 0;} 
	div.wrap { overflow-x: auto;}

		ul { list-style: none; white-space: nowrap; }
			ul li { 
				display: inline;
				padding: 5px; 
				white-space: nowrap;
				zoom:1;
			}
				ul li a { 
					display:inline-block;
					width: 100px; 
					height: 100px;
					background: red;
				}
</style>
</head>

<body>
	<div class="wrap">
		<ul>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
			<li><a href="#"></a></li>
		</ul>
	</div>
</body>
</html>

rus · January 29, 2010

потому что список плоский.... горизонтальный... ну, можно сделать display: inline, без разницы...

Нет, не без разницы. Посмотри как Волкер сделал... с флоатом просто они так и будут переноситься и без разницы задашь ты им ширину или нет.

AKyHuH · January 30, 2010

Спасибо, то, что надо про inline-block то я и забыл... вот что значит начать верстать ещё на старых браузерах, как-то органически отторгаются все "новые" свойства....

psywalker · January 30, 2010

Спасибо, то, что надо про inline-block то я и забыл... вот что значит начать верстать ещё на старых браузерах, как-то органически отторгаются все "новые" свойства....

Нет, дело не в этом. Это значит другое, что кому-то неохота сидеть, учить и вникать

AKyHuH · January 30, 2010

Нет, дело не в этом. Это значит другое, что кому-то неохота сидеть, учить и вникать

нуууу, как бы это сказать, я вообще нигде и никогда не учился html-верстке, я как бы больше программер, но жизнь заставила заняться и версткой... учился примерно следующим образом, скачал заглавную страницу mail.ru (было это, не соврать... году эдак в 2000-м), тогда она была сверстана таблицами... методом "удалил кусок кода, посмотрел что на странице изменилось" разобрался в том, какой тег за что отвечает, ну вот как-то так и сверстал свою первую страницу... переход с табличной верстки на слои поначалу вообще морально мне не давался, организм как-то даже сопротивлялся... но всё же вник кое-как, теперь вот пытаюсь разобраться в тонкостях этого процесса, не без вашей помощи

Пошел верстать дальше, осталось каких-то 70-80 страниц шаблона доверстать

psywalker · January 30, 2010

нуууу, как бы это сказать, я вообще нигде и никогда не учился html-верстке, я как бы больше программер, но жизнь заставила заняться и версткой... учился примерно следующим образом, скачал заглавную страницу mail.ru (было это, не соврать... году эдак в 2000-м), тогда она была сверстана таблицами... методом "удалил кусок кода, посмотрел что на странице изменилось" разобрался в том, какой тег за что отвечает, ну вот как-то так и сверстал свою первую страницу... переход с табличной верстки на слои поначалу вообще морально мне не давался, организм как-то даже сопротивлялся... но всё же вник кое-как, теперь вот пытаюсь разобраться в тонкостях этого процесса, не без вашей помощи
Пошел верстать дальше, осталось каких-то 70-80 страниц шаблона доверстать

Молодца, удачи тебе. Ученье свет, а неученье тьма

Sign In

Горизонтальный список с overflow-x: scroll

Question

Link to comment

Share on other sites

14 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

Join the conversation

Обсуждения

Important Information