警队分区'；由JQuery插入容器以保持在同一行上

我知道有人问过很多类似的问题，但似乎没有一个能真正回答我的问题。本质上，我有一个容器div，在这个容器div中，我通过draggable/dropable插入（通过JQuery）新div，当新div填充容器时，它们开始跳到新行。我需要它们保持在同一行上，并使容器水平滚动

这是我的HTML的一部分

<label for="builder">Builder Area:</label>
<div id="builder">
    <div class="layer" data-layer='0'></div>
</div>

---

这与其说是jQuery，不如说是CSS。添加一个

空白：nowrap.layer

规则，以便浏览器知道如何将

.layer

的内联内容布局在一行上，而不是默认的换行行为。（）

---

虽然这会导致“块”无法包装，但对我来说，这是一种不受欢迎的行为，不过简单地添加空白：正常；到.chunk css修复了这一点，因此我们在这里很好。谢谢你的心跳

<div class='chunk' id='"+chunk_id+"'>Chunk:"+chunk_id+"</div>"

$(".layer").droppable({
    accept: "#chunk_drag",
    activeClass: "ui-active",
    hoverClass: "ui-hover",
    drop: function(event, ui) {

        // Create a new Chunk
        var chunk = "<div class='chunk' id='"+chunk_id+"'>Chunk:"+chunk_id+"</div>";
        chunk_id++;

        // Add the Chunk into the layer
        $(this).append(chunk);

        return true;
    },
});

.layer {
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 2px 2px 10px #222222;
    background-color: #EFEFEF;
    min-height: 50px;
    padding: 5px;
    margin: 5px;
    overflow-x: scroll;
}

.chunk {
    border: 1px solid black;
    box-shadow: 2px 2px 10px #222222;
    border-radius: 5px;
    background-color: #FAFAFA;
    padding: 5px;
    margin : 5px;
    overflow: auto;
    max-width: 400px;
    max-height: 200px;
    display: inline-block;
}

.layer {
...
  white-space: nowrap;
}