html - 使颜色图例与其他 div 在同一行 float

Question

我需要在窗口的右侧制作一个颜色图例，与标题+按钮在同一行。现在它看起来像这样:

http://jsfiddle.net/MTB2q/80/

<ul class="legend">
    <li><span class="superawesome"></span> Super Awesome</li>
    <li><span class="awesome"></span> Awesome</li>
    <li><span class="kindaawesome"></span> Kinda Awesome</li>
<li><span class="notawesome"></span> Not Awesome</li>
</ul>

<div style="text-align: center">
 <label ID="contentTitle">TITLE</label>
</div>

<div style="text-align: center">
 <button ID="contentButton">button</button>
</div>

.legend { list-style: none; }
.legend span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; }

.legend .superawesome { background-color: #ff00ff; }
.legend .awesome { background-color: #00ffff; }
.legend .kindaawesome { background-color: #0000ff; }
.legend .notawesome { background-color: #000000; }

如您所见，颜色在单词的右侧，我需要它们在左侧。

Answer 1

将跨度的 float 更改为左侧并将图例的 float 更改为右侧解决了该问题。