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

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

<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