javascript - 如何设置带有内部浮点的div样式以水平扩展以允许所有内部浮点的div都适合？

基本上，我有一个带有一些浮动项的内容框：

html

<div class="contentBox">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

css

.contentBox {
    overflow-x:scroll;
}
.item {
    float:left;
}

我希望框的宽度扩大，以允许我添加到其中的项目尽可能多地向左浮动（这意味着元素被推到右侧）。但是相反，由于没有空间，它只能放大到下拉项目之前的页面宽度。我希望它在页面外继续。

我该怎么做呢？

我认为我需要使用一些JavaScript，但如果可能的话，我宁愿使用纯CSS解决方案。

最佳答案

您可以在具有内联块子元素的父容器上使用white-space: nowrap：

.contentBox {
    overflow-x: scroll;
    white-space: nowrap;
}
.item {
    display: inline-block;
}

演示：http://jsfiddle.net/vo8202uy/

$('button').click(function() {
    $('.contentBox').append('<div class="item">' + ($('.item').length+1) + '</div>');
});

.contentBox {
    overflow-x:scroll;
    white-space: nowrap;
}
.item {
    width: 50px;
    background: coral;
    margin-right: 5px;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contentBox">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
<button>Add more</button>