Задача по CSS

psywalker · October 27, 2011

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

Дано:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Задачка по CSS</title>
<style type="text/css">
	* { margin: 0; padding: 0;}
	.nav { list-style: none;}
		.nav > li { 
			display: inline-block; 
			width: 100px; 
			border: 1px solid #000;
			vertical-align: top;
		}
</style>

</head>

<body>

	<ul class="nav">
		<li>
			<p>Пункт 1</p>
			<p>Пункт 1</p>
			<p>Пункт 1</p>
			<p>Пункт 1</p>
			<p>Пункт 1</p>
		</li>
		<li>Пункт 2</li>
		<li>Пункт 3</li>
		<li>
			<p>Пункт 4</p>
			<p>Пункт 4</p>
			<p>Пункт 4</p>
			<p>Пункт 4</p>
			<p>Пункт 4</p>
		</li>
		<li>Пункт 5</li>
	</ul>
</body>
</html>

Задача:

Нужно, чтобы при сужении экрана, не помещающиеся пункты меню, как и сейчас, переходили на другую строку, НО только те, которые перешли - должны исчезать, так же, как и с помощью oveflow : hidden; Т.е. нужно, чтобы по сути у нас была одна строка пунктов, верхняя, а все остальные пункты, которые переходили на следующую (в связи с нехваткой места) - обрезались.

Да, кажется легко, скажите вы. "Поставь oveflow : hidden; + нужную высоту и будет тебе счастье". Но в том-то и дело, что высота пунктов должна учитываться, т.е. фиксированную я задать не могу, а в пунктах может быть очень много материала.

Возможно ли такое сделать на чистом CSS, и если да, то интересуют любые варианты.

http://jsfiddle.net/wsWtf/

paracelso · November 1, 2011

Да, он ответил плохо.
А по моему он ответил по существу и правильно.

"По существу" к его ответу точно не применимо. Так и будем переливать?

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

Edited November 1, 2011 by paracelso

Sign In

Задача по CSS

Question

psywalker

Link to comment

Share on other sites

26 answers to this question

Recommended Posts

paracelso

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information