CSS to lay out keys/values legend horizontally.

Here's a simple example:

/* basic positioning */
.legend { list-style: none; }
.legend li { float: left; margin-right: 10px; }
.legend span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; }
/* your colors */
.legend .superawesome { background-color: #ff00ff; }
.legend .awesome { background-color: #00ffff; }
.legend .kindaawesome { background-color: #0000ff; }
.legend .notawesome { background-color: #000000; }
<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>

You don't need floats for this sort of thing. Really what you have is a list of pairs. There is a tag set for that called a definition list: 

<dl>
    <dt>[blue]</dt>
    <dd> - LabelA </dd>

    <dt>[green]</dt>
    <dd> - LabelB </dd>

    <dt>[red]</dt>
    <dd> - LabelC </dd>
</dl>

These are inline block by default. From there you can style the pairs of elements like so: 

<style>
     dl
     {
         width: 200px;
         background: #fff;
         border: 1px solid #000;
         padding: 5px 15px;
      }

      dt, dd
      {
         display: inline;
      }       
</style>

Tags:

Html

Css

Recent Posts