Как получить горизонтальную прокрутку с элементом div?

Question

У меня есть этот элемент div:

    <div id="tl"  style="float:right;width: 400px; height:100px; background-color:Green; overflow-x: scroll;overflow-y: hidden;">

        <div id='demo' style="float:left;height:90px;"> dsadsad </div>
        <div id='demo' style="float:left;height:90px;"> dsadsad </div>

    </div>

Демонстрационная программа div будет копировать код больше раз внутри tl div. Я хочу горизонтальную прокрутку TL Div.

Как мне этого добиться?

Answer 1

Для ваших "демо" div, измените float: left для отображения: inline-block; тогда это должно работать.

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

РЕДАКТИРОВАТЬ: как говорит timhessel в комментариях ниже, Internet Explorer 6/7 не будет принимать inline-block для элементов div, поэтому вам нужно использовать элементы span для div «demo», поскольку они по умолчанию встроены по умолчанию.

Answer 2

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

CSS:

    div.horiz-container {
        border: 1px solid silver;
        height: 100px;
        overflow-x: auto;
        overflow-y: hidden;
        whitespace: nowrap;
        width: 400px;
    }

    div.horiz-container div.content {
        float: left;
        display: inline;
        height: 100px;
        width: 500px;
    }

    div.horiz-container p {
        float: left;
        display: inline;
        height: 100px;
        width: 100px;
        text-align: center;
        position: relative;
    }

HTML:

<div class="horiz-container">
    <div class="content">
        <p>Lorem</p
        <p>ipsum</p>
        <p>dolor</p>
        <p>sit</p>
        <p>amet</p>
    </div>
</div>

Посмотреть демо: http://nikc.kapsi.fi/dev/html/misc/horiz-scroll.html

Также взгляните на аналогичный вопрос, заданный ранее: HTML-элементы, столбцы, горизонтальная полоса прокрутки

Answer 3

Если вы используете jQuery, я использовал следующее, чтобы сделать то, что я думаю, что вы хотите.

http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html