将CSS用于水平排列键/值图例。

Question

将CSS用于水平排列键/值图例。

21

我正在使用HTML/CSS创建一个水平图例。我有一个带有一些文本的彩色框，旁边是一些空间，然后是另一个带有一些文本和空间的彩色框，以此类推。

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

我无法解决这个跨浏览器的问题。我已经尝试了所有我能想到的浮动div / span的组合，但是要么标签最终在有色框下面，要么我无法让填充工作以分隔图例中的每个键。

你会如何处理这个问题？

- Davis Dimitriov

3

如果您发布最接近实际情况的工作示例，将有助于其他人帮助您找出如何修复问题。 - Whetstone

1

@Whetstone，我更感兴趣的是看看别人如何以最佳方式解决这个问题，而不仅仅是通过一些hack方法让我的解决方案能够工作。 - Davis Dimitriov

6个回答

17

你不需要使用浮点数来处理这种情况。实际上你所拥有的是一系列的对。HTML中有一个专门用于存储这种结构的标签叫做定义列表：

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

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

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

这些默认是~~内联~~ 块级元素。从那里，您可以像这样为元素对设置样式：

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

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

- Rob Allen

2

不，它们真的不是。它们是“块级元素”。我同意这是正确的标记方式，但你需要意识到要么使用“display:inline”，要么使用“float:left”。 - Ryan Kinal

3

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

dl、dt和dd默认为display block。由于我们希望dt和dd在同一行上，所以我们使用display: inline-block。（对于我们控制彩色方块的宽度和高度来说，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;
}

结果：

Result: 在这里查看结果

- Marinov

1

不需要使用浮动的div。试试这个

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

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

抱歉，如果您的文本不在框中，也请添加...

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

示例这里

- musefan

1

这应该可以工作...

避免使用浮动，因为您特别提到了跨浏览器，所以我假设您至少支持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;}

- Andrew

0

尝试使用小表格和背景颜色。

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

- Tim Withers

表格不应该用于布局。 - Diodeus - James MacFarlane

如果您的数据是表格数据，那么这是最好的方法。如果不是，则应避免使用此方法，因为它不是语义化的。 - Chris Sobolewski

3

表格不应用于“布局”，但他所说的并不是布局，只是用于显示数据。在投反对票之前，请先阅读问题。 - Tim Withers

4

我认为传说可以被归类为表格数据，因此使用标记方法是合理的。 - Ryan Kinal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- wsanville · Accepted Answer

这里有一个简单的例子：

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