Как я могу предотвратить перенос плавающих элементов div при изменении размера браузера?

Question

Как сделать так, чтобы DIV, расположенные рядом друг с другом, не переносились, если размер браузера изменен так, что область просмотра становится меньше?

div {
  float: left;
}

Например, когда браузер полностью развернут, строка div s выглядит следующим образом:

|div| |div| |div| |div| |div| |div| |div| |div|

Но когда размер браузера уменьшается, это происходит:

|div| |div| |div| |div| |div|
|div| |div| |div|

Как сделать так, чтобы div не переносился при уменьшении размера браузера?

Answer 1

Оберните их в другой div, для которого указана ширина (или минимальная ширина).

<div class="parentContainer">
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
</div>

.parentContainer {
    /* The width of the parent needs to be equal to the total width of the children.
    Be sure to include margins/padding/borders in the total. */
    width: 600px;
    overflow: auto;
}

Также помогает иметь переполнение: автоматически указывается для содержащего элемента div, чтобы его высота соответствовала дочерним плавающим элементам.

Answer 2

Я довольно поздно к игре, но вот что я нашел, что работает:

Допустим, у вас есть навигация, структурированная как:

<nav>
    <ul>
        <li><a href="#">Example Link</a></li>
        <li><a href="#">Example Link</a></li>
        <li><a href="#">Example Link</a></li>
    </ul>
</nav>

Чтобы заставить его отображать ссылки встроенными, без всяких переносов, вы можете просто использовать:

nav ul {
    white-space: nowrap;
}

nav ul li {
    display: table-cell;
}

Нет фиксированной ширины или что-либо требуется.

Скрипка: http://jsfiddle.net/gdf3prb4/

Answer 3

Сделать контейнер вокруг них

.container {
width: 500px;
white-space: nowrap;
overflow: visible/hidden/scroll - whichever suits you;
}

Answer 4

Я понимаю, что модно ненавидеть на столах, но они могут быть полезны.
http://jsfiddle.net/td6Uw/
Вместо того, чтобы плавать div, поместите их в таблицу и оберните таблицу div с ограниченным размером. TR предотвратит обертывание.
Кроме того, я использовал DIV внутри TD, чтобы упростить стилизацию ячеек. Вы можете стилизовать TD, если вы тратите время, но я считаю, что их сложно стилизовать, и я обычно просто теряю силы и использую метод DIV-in-TD, используемый моей скрипкой.

Answer 5

Это действительно очень просто. Пример кода:

Element {
white-space: nowrap;
}