Невозможно заставить ul в списке по горизонтали переполниться по горизонтали (и прокрутить) - PullRequest
Новая
       2

Невозможно заставить ul в списке по горизонтали переполниться по горизонтали (и прокрутить)

15 голосов
/ 29 июня 2011

Я пытаюсь получить неупорядоченный список для горизонтального перечисления (выполняется с помощью float: left), но он отказывается переполняться по горизонтали. Вместо этого он автоматически переполняется в следующей строке (более того, даже при переполнении-y: нет, он автоматически создает вертикальную полосу прокрутки. Есть идеи? 

<style type="text/css">
    ul {
        height:15px;
        width:400px;
        overflow-y:none;
        overflow-x:auto;
    }

    li {
        float:left;
    }

</style>

<body>
    <div>
        <ul id="someList">
            <li>element 1</li>
            <li>element 2</li>
            <li>element 3</li>
            <li>element 4</li>
            <li>element 5</li>
            <li>element 6</li>
            <li>element 7</li>
        </ul>
    </div>
</body>

1 Ответ

31 голосов
/ 29 июня 2011

Если я правильно понимаю, это должно быть так:

http://jsfiddle.net/Uyc8d/

Я переключился на display: inline-block (вместо float: left) и использую white-space: nowrap для предотвращения переноса. 

ul {
    width: 400px;
    overflow-x: scroll;
    background: #ccc;
    white-space: nowrap
}

li {
    display: inline-block;

    /* if you need ie7 support */
    *display: inline;
    zoom: 1
}
...