Плавающие разделители CSS без обертывания

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

Я пробовал следующее, но это не сработало: вместо этого оно завершается.

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 и т.д.), но все они не удались.

Можно ли это сделать? Если да, то как?

Ответы

Ответ 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/

Ответ 2

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

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

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

Ответ 3

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

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

Заклинание здесь: http://jsfiddle.net/HZzrk/1/

Ответ 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;
}