Html 使颜色图例与其他div在同一行中向右浮动

我需要使一个颜色图例位于窗口的右侧，与title+按钮位于同一行。现在看起来是这样的：

超级棒
棒极了
有点棒
不可怕

标题
按钮
.legend{列表样式：无；}
.图例span{border:1px solid#ccc；float:left；宽度：12px；高度：12px；边距：2px；}
.legend.superawesome{背景色：#ff00ff；}
.legend.awesome{背景色：#00ffff；}
.legend.kindaawesome{背景色：#0000ff；}
.legend.notawesome{背景色：#000000；}

---

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

将跨度的浮动改为左侧，将图例的浮动改为右侧，解决了这个问题。

在IE 11和Chrome中对此进行了快速测试：

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

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

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

---

它不适合屏幕，而且颜色现在位于单词的右侧，我需要它们位于单词的左侧。@SKLAK，颜色仍然在我的浏览器的原始位置，即左侧。好的，这适合屏幕：但是颜色仍然位于单词的右侧，对我来说，嗯。。必须依赖于浏览器。@SKLAK，K，我现在明白了，您所要做的就是将ul浮动到右侧。所以您仍然可以在浏览器中看到带有新JSFIDLE的标签左侧的颜色吗？

<ul id="legend">
    <li class="superawesome"><div>Super Awesome</div></li>
    <li class="awesome"><div>Awesome</div></li>
    <li class="kindaawesome"><div>Kinda Awesome</div></li>
    <li class="notawesome"><div>Not Awesome</div></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; float: right; padding: 0; margin: 0; }
#legend li { margin: 0 0 2px 0; padding: 0 0 0 12px; }
#legend div { width: 100%; background-color: white; padding-left: 2px; }
/* your colors */
#legend .superawesome { background-color: #ff00ff; }
#legend .awesome { background-color: #00ffff; }
#legend .kindaawesome { background-color: #0000ff; }
#legend .notawesome { background-color: #000000; }