Пули добавляются в список динамически, несмотря на отображение: inline - PullRequest
Новая
       1

Пули добавляются в список динамически, несмотря на отображение: inline

0 голосов
/ 07 июля 2011

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

По какой-то странной причине новые маркеры были завернуты ниже, несмотря на использование display:inline в таблице стилей.Использование white-space:nowrap не помогло.Наконец мне пришлось переключиться только на изображения.

Есть идеи, почему это происходит? 

<div id="wrapper">
    <ul id="slides">
            <li id="randomPick"><img src="http://www.domain.com/images/blah/filename.jpg" height="120" class="image"/></li>
    </ul>
</div>

li {
    list-style: none;
    display: inline;
   /* float:left; */
}

#wrapper {
    position: relative;
    overflow: scroll;
    width: 600px;
    height: 150px;
    left: 21px;
    top: 5px;
    overflow-y: hidden;
   /* width:auto */
    white-space:nowrap;
}

#slides {
    position: absolute;
}

#slides li {
    float: left;
    height: 140px;
    /* width: 200px; */
    padding-left:5px;
}

$("#wrapper").scroll(function () {
                    var right = $(".randomPick:last").offset().left + $(".randomPick:last").outerWidth();
                    if( right < 1000 ){
                        // Test
                        $("#wrapper ul").append("<li class="randomPick"><img src='http://www.domain.com/images/blah/filename.jpg' height='120' class='image'/></li>");
                    }
                }
            );

1 Ответ

1 голос
/ 07 июля 2011

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

Если вы знаете точную ширину каждого li, вы можете программно увеличить ширину на li (и на некоторый объем отступа, если хотите), используя jQuery для изменения атрибута width css при каждом добавлении / удалении.

Если ширина li динамическая, вы можете получить ее высоту с помощью свойств DOM clientWidth и clientHeight.

...