CSS水平布局键/值图例.

Question

我在html/css中创建了一个水平图例.我有一个彩色的盒子,旁边有一些文字,然后是一些空间,然后是另一个带有文字,空格等的彩色盒子.

[blue] - LabelA    [green] - LabelB    [red] - LabelC

我无法弄清楚如何跨浏览器这样做.我已经尝试了所有可以想到的浮动div/span的组合,但是标签最终会出现在彩色框下面,或者我无法使用填充来分隔图例中的每个键.

你会怎么做？

Answer 1

这是一个简单的例子:http://jsfiddle.net/MTB2q/

Answer 2

你不需要漂浮物来做这种事情.你真的拥有一对配对清单.有一个标记集,称为定义列表:

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

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

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

这些是默认的.从那里你可以设置像这样的元素对:inline block

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

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

Answer 3

看看这个jsfiddle,看看这是不是你想要的http://jsfiddle.net/CQXk5/