Question

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

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

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

你会怎么做？

Answer 1

以下是一个简单示例：http://jsfiddle.net/MTB2q/

enter image description here

Answer 2

你不需要漂浮物来做这种事情。你真的拥有一对配对清单。有一个标记集，称为definition list：

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

Answer 4

无需使用浮动div。试试这个

DIV.LegendItem
{
   display:inline-block;
   margin-right:20px;
}

（如果DIV没有内容，则添加宽度和高度）

很抱歉，如果您的文字不在包装盒中，也请添加此内容...

SPAN.LegendText
{
   display:inline-block;
   margin-right:20px;
}

示例here

Answer 5

这应该有用......

如您特别提到的跨浏览器，避免浮动，所以我假设您至少支持IE7。 IE7以一种讨厌的方式包装浮动，这就是我建议使用内联div的原因。

DOCTYPE HTML

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

HTML

<div class="Legend">
  <div class="Blue">&nbsp;</div>
    Blue
    <div class="Green">&nbsp;</div>
    Green
    <div class="Red">&nbsp;</div>
    Red
</div>

CSS

.Legend div{
    margin-left:15px;
    width:16px;
    border:1px solid #808080;
    display:inline-block;
}
.ie7 .Legend div{
    display:inline;
    zoom:1;
}
.Red {background-color:red;}
.Green {background-color:green;}
.Blue {background-color:blue;}

Answer 6

尝试使用小桌子并使用背景颜色。

<table>
  <tr>
    <td style="backgroundcolor:red; width:5px">&nbsp;</td>
    <td>- Red</td>
  </tr>
</table>

Answer 7

基于Rob Allen的回答，这是一个使用定义列表的快速简单的图例：

dl，dt和dd默认为显示块。由于我们希望dt和dd在同一行，因此我们使用display：inline-block。（内联块对于我们能够控制彩色正方形的宽度和高度很重要）

HTML

<dl>
    <dt class="red"></dt>
    <dd>Existing clients</dd>

    <dt class="yellow"></dt>
    <dd>New clients</dd>
</dl>

CSS

dl dt{
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
dl dd{
    display: inline-block;
    margin: 0px 10px;
    padding-bottom: 0;
    vertical-align: middle;
}
dl dt.red{
    background: #f8d7da;
}
dl dt.yellow{
    background: #f2c715;
}

结果： See the result here

CSS水平布局键/值图例。

7 个答案: