CSS неупаковывающие плавающие div

Question

Мне нужно создать одну строку, содержащую переменное количество (плавающих?) Делений: размер контейнера фиксирован, и предполагается, что он должен добавлять горизонтальную полосу прокрутки, когда это необходимо, без переноса.следующее, но это не работает: вместо этого оно переносится.

div#sub {
    background-image:url("../gfx/CorniceSotto.png");
    width:760px;
    height:190px;
}
div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
}
div#sub > div#ranking > div.player {
    float:left;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

Я пробовал несколько вещей (inline, table-cell и т.* Можно ли это сделать?Если да, то как?

Answer 1

Используйте display: inline-block вместо float и укажите контейнер white-space: nowrap.

div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
}
div#sub > div#ranking > div.player {
    display: inline-block;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

Вот пример: http://jsfiddle.net/D5hUu/3/

Answer 2

inline не будет работать, табличная ячейка должна работать - посмотрите это jsFiddle, которое я сделал в ответ на похожий вопрос:

http://jsfiddle.net/DxZbV/1/

не будет работать в <= ie7хотя ... </p>

Answer 3

упс, я неправильно понял вопрос. Предыдущий ответ удален.

---

на вашем контейнере, white-space: nowrap, а затем на элементах display: inline-block

Скрипка здесь: http://jsfiddle.net/HZzrk/1/

Answer 4

Отредактировано : Объединено с DanielB и моим первоначальным ответом.Вам нужно поставить min-width вместо width для sub и ranking и установить элементы на inline-block с контейнером, имеющим white-space: nowrap.См .: http://jsfiddle.net/5wRXw/3/

Редактировать 2 : Для ваших целей может быть лучше исключить свойства overflow вместе для элемента rankingСм http://jsfiddle.net/5wRXw/4/

#sub {
    backgrond-color: yellow;
    min-width:760px;
    height:190px;
}
#ranking {
    position:relative;
    top:42px;
    left:7px;
    min-width:722px;
    height:125px;
    overflow-x:auto; /* you may be able to eliminate this see fiddle above */
    overflow-y:hidden; /* and eliminate this */
    white-space: nowrap; /* like DanielB */
}
#ranking > .player {
    display: inline-block; /* like DanielB */
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}