Разрешение переполнения X

Question

мой код выглядит следующим образом:

#under {
    width: 100%;
    height: 50px;
    background-color: #D4D4D4;
    border: none;
    -webkit-box-shadow: inset 0px 0px 4px 0px #000000;
    -moz-box-shadow: inset 0px 0px 4px 0px #000000;
    box-shadow: inset 0px 0px 4px 0px #000000;
    overflow-x: scroll;
    white-space: nowrap;
}
#under ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#under ul li {
    min-width: 100px;
    height: 40px;
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    background-color: #999;
    display: block;
}

По сути, у меня есть #under div с элементами li внутри него. Я хочу, чтобы они «переполнили» контейнер, чтобы он мог прокручиваться по оси X, но я не могу понять, как это сделать!

Это заставит элементы li отображаться друг под другом.

Любая помощь приветствуется, спасибо!

РЕДАКТИРОВАТЬ: живой пример https://babblebox.me/mobile/

Answer 1

они все еще находятся под управлением, потому что они плавающие, и потому что width: 100%, это изменение размера до доступного размера экрана, а не div.

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

Я имею в виду:

#under ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: 8000px;
}

Answer 2

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

#under {                                                                                                                                                                                                         
    width: 100%;
    height: 50px;
    background-color: #D4D4D4;
    border: none;
    -webkit-box-shadow: inset 0px 0px 4px 0px #000000;
    -moz-box-shadow: inset 0px 0px 4px 0px #000000;
    box-shadow: inset 0px 0px 4px 0px #000000;

}   
#under ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    overflow-x: scroll;
    white-space: nowrap;
}   
#under ul li {
    min-width: 100px;
    height: 40px;
    margin-top: 10px;
    margin-left: 10px;
    background-color: #999;
    display: inline-block;
}

* Примечание: я изменил в float: left; display: block на display: inline-block в #under ul li

здесь вы можете увидеть это в действии: http://jsfiddle.net/rvt5N/

Answer 3

вы сделали ширину #under меньше, чем она есть, чем работает ваше переполнение, и дали ширину в пикселях ...

Answer 4

попробуй overflow: auto; в #under?