Question

我需要将一个颜色图例设置在窗口的右侧，与标题+按钮位于同一行。现在它看起来像这样：

<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

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

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

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

2 个答案: