css - 不要换行 div

Question

如何创建float:right一组相邻的 div 并使它们不换行，无论它们有多少存在或它们中的任何一个有多宽。如果它们一起比视口宽，则应该出现 x-scroll。

这些 div 中的内容应该正常换行。

只有 CSS 会很好。

Answer 1

使用 为父元素设置样式white-space: nowrap;，但这仅适用于display: inline（或display: inline-block;）元素。给定以下 HTML：

<div id="parent">
    <div class="child"></div>
    <!-- there's quite a lot of these... -->
    <div class="child"></div>
</div>

和CSS：

#parent {
    white-space: nowrap;
}

#parent .child {
    display: inline-block;
    /* there's some other CSS for aesthetics */
}

JS 小提琴演示。

不幸的是，我认为没有办法强制float-ed 元素不换行。

要保留或强制为后代元素强制换行，您必须显式覆盖继承和设置white-space: normal（以及可能定义 awidth或max-width）

/* other CSS remains intact */

#parent .child {
    display: inline-block;
    /* irrelevant/aesthetic CSS */
    white-space: normal;
    max-width: 8em;
}

JS 小提琴演示。

Answer 2

几个元素：http: //jsfiddle.net/thirtydot/A8duy/

许多元素：http: //jsfiddle.net/thirtydot/A8duy/1/

HTML：

<div class="block-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>​

CSS：

.block-container {
    text-align: right;
    white-space: nowrap;
    float: left;
    width: 100%;
    margin-bottom: 1em;
    border: 1px solid red;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.block-container > div {
    width: 50px;
    height: 50px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    text-align: left;
    white-space: normal;
    border: 1px solid blue;
}