html - 如何布局一系列跨度，然后是换行符，然后是按钮？

Question

我遇到了最困难的时间布局:

我想要的:

• 水平线上的一些(比如 5 个)元素(上图中的彩色条)
• 一个换行符
• 一个按钮

这 5 个元素应该可以通过 javascript 访问，这样我就可以更改样式属性(例如背景颜色)。

基本上我的问题是:

• 我不能将它们设为 DIV，否则它们将不会是水平的(即在红色和橙色、橙色和黄色等之间会有一个换行符)
• 如果我让它们跨越，它们会像上面那样排列，但它们之后(按钮之前)没有换行符，即使我输入 <br> 也是如此。或 <p>标签

我怎样才能像这样布置东西？

Answer 1

为什么不能将它们设为 div？

Here's a Fiddle这使得它发生。它甚至可以优雅地处理自适应调整大小。

HTML:

    <div>
    <div class="colorbox" style="background: red"></div>
    <div class="colorbox" style="background: orange"></div>
    <div class="colorbox" style="background: yellow"></div>
    <div class="colorbox" style="background: green"></div>
    <div class="colorbox" style="background: blue"></div>

</div>

<br>
    <button>Button</button>

CSS:

.colorbox {
    width: 50px;
    height: 100px;
    display:inline-block;
    margin:-3px;
    border:1px solid;
}