使颜色图例与其他 div 在同一行中浮动答案

【问题标题】：Make color legend float right in same line as other div使颜色图例与其他 div 在同一行中浮动
【发布时间】：2014-07-31 20:25:33
【问题描述】：

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

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

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

【问题讨论】：

标签： html css button user-interface label

【解决方案1】：

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

【讨论】：

它不适合屏幕而且颜色现在在单词的右侧，我需要它们在单词的左侧。
@SKLAK，颜色仍然在我的浏览器上的原始位置，即左侧。
好的，这适合屏幕：jsfiddle.net/MTB2q/80 但是颜色仍然在我的单词的右侧嗯.. 必须取决于浏览器。
@SKLAK，K，我现在看到您所做的只是将 ul 浮动到右侧。
所以使用新的 jsfiddle 你仍然可以在浏览器中看到标签左侧的颜色吗？

【解决方案2】：

在 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>

CSS 调整如下：

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

【讨论】：