CSS Fix контейнер и элементы переполнения

Question

Мне интересно, если это способ заставить элементы переполнения фиксированного контейнера находиться на одной строке вместо перехода на новую строку.

http://jsfiddle.net/vrSRE/3/

Спасибо.

Answer 1

Да, есть способ.

Вы должны заменить float: left на display: inline-block и добавить white-space: nowrap к родительскому элементу:

См .: http://jsfiddle.net/vrSRE/4/

ul {
    width: 300px;
    height: 30px;
    background: red;
    white-space: nowrap
}
li {
    display: inline-block
}

Если вам не нужен пробел между элементами, самый простой способ решить эту новую проблему - удалить пробелы в HTML, например:

• http://jsfiddle.net/vrSRE/6/

Другие варианты, которые вам, вероятно, не нужны для удаления пробелов, см .:

• Как убрать пробел между элементами inline-block?

И, наконец, если вам нужна поддержка IE7, используйте это:

• http://jsfiddle.net/vrSRE/7/

Answer 2

См .: http://jsfiddle.net/keBFd/

Вы можете использовать white-space: nowrap и display: inline - вы, возможно, не захотите display: inline, хотя.