Фиксация события переноса элементов.
Приветствую всех.
Ситуация следующая. Имеется div в котором <ul> <li>1</li> <li>2</li> ... <li>N</li> </ul> Теги li выводятся горизонтально посредством применения к ним css то есть примерно так: 1 2 .. N Естественно что ширина div ограничена и если элементы li не помещаются во всю ширину div то происходит перенос их на новую строку ниже. Нужно отследить этот перенос с целью скрывать не умещающиеся в одну строку (далее будет реализована прокрутка их, чтобы теги li были все в одной строке) :help: как быть? |
Установить высоту и ширину, и скрывать всё не помещающееся.
width: 9999999px; /* Устанавливаем ширину... */ height: 9999999px; /* и высоту... */ overflow: hidden; /* ...и скрываем всё не помещающееся. ()также можно посмотреть overflow-x и overflow-y */ |
Ширина div у меня ограничена половиной экрана. С параметром overflow: hidden экспериментировал, получилось что часть элемента уходящего за границу div всё же видна. И не понятно как в таком виде отследить событие чтобы повесить на него функцию.
|
.Nikita,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
div{
width: 200px;
overflow: hidden;
border: 5px solid #FF0000;
}
li{
margin: 0px;
float: left;
width: 70px;
background: #228B22;
}
ul{
margin: 0px;
display: block;
width: 280px;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>...</li>
<li>N</li>
</ul>
</div>
</body>
</html>
|
Дело в том что текст в li будет переменной длины (те самые li я добавляю в документ динамически), поэтому параметр width: 70px; не корректен.
Есть ли способ добавить прокрутку в div не вертикальную а горизонтальную? У меня overflow:auto , когда добавляемые элементы упираются в нижний край вылазит вертикальная полоса прокрутки. Есть ли возможность чтобы добавляемые элементы не переносились на новую строку и добавлялась горизонтальная полоса прокрутки у родительского div/ |
white-space со значением no-wrap на li-элементы должно помочь от переноса на новую строку. Дальше, как уже сказали, overflow-y: auto для контейнера.
|
Спасибо.
|
| Часовой пояс GMT +3, время: 20:11. |