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

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;
}

Answer 2

正如sdcr所说，有很多方法！这是其中一个例子。

http://jsfiddle.net/f3xLvdpm/

HTML：

<div class="red block"></div>
<div class="orange block"></div>
<div class="yellow block"></div>
<div class="green block"></div>
<div class="blue block"></div>
<div class="button">
    <button>BUTTON</button>
</div>

CSS：

.block {float: left; width: 100px; height: 120px;}
.red {background-color: red;}
.orange {background-color: orange;}
.yellow {background-color: yellow;}
.green {background-color: green;}
.blue {background-color: bliue;}
.button {clear: both; padding-top: 20px;}

Answer 3

使用div围绕范围并使用display: block;作为div，您可以删除br标记。

或者您可以将display: inline-block;用于span或div标记。