CSS: увеличить ширину одной строки на странице

Question

CSS: увеличить ширину одной строки на странице

0

Я хочу, чтобы набор div был выровнен в одной строке, проходящей по ширине страницы и прокручивая horizzontaly.

|----  page  ----|

[ ][ ][ ][ ][ ][ ][ ][ ]
      <---->scroll

Я пробовал разные варианты, такие как плавающее левое, встроенное отображение и т.д., Но все мои испытания заканчиваются тем, что идет во второй строке с шириной страницы:

|----  page  ----|

[ ][ ][ ][ ][ ][ ]
[ ][ ]

здесь есть jsfiddle

CSS:

.container {
    width: auto;
}
.foo {
    background-color:red;
    width: 20px;
    height:20px;
    margin: 2px;
    float: left;
}

HTML:

<div class="container">
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
    <div class="foo"></div>
</div>

nkint 07 янв. 2014, в 20:06

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Arbel · Accepted Answer · 2014-01-07T17-11-00.000Z

Это сделает вашу работу:

.container {
    white-space: nowrap;
}
.foo {
    display: inline-block;
    background-color:red;
    width: 20px;
    height:20px;
    margin: 2px;
    zoom: 1; / for less than ie8 support
    *display: inline; / for less than ie8 support
}

Демо: http://jsfiddle.net/PexbZ/1/

+1. Но обратите внимание, что inline-block может не работать должным образом в IE <8. caniuse.com/inline-block
@showdev Я не думаю, что веб-разработчики должны поддерживать IE8 и старше. Microsoft больше не поддерживает WinXP, и Windows 7 по умолчанию имеет IE9 и поддерживает IE11.
Достаточно справедливо - это спорная дискуссия. Я просто хотел предоставить информацию на случай, если она имеет отношение к проекту ОП.
@showdev обновил ответ, чтобы исправить проблему менее чем в ie8