CSS以水平布局键/值图例。

我在html/css中创建了一个水平图例。我有一些文字旁边，然后一些空间，然后用一些文字，一个空间的另一彩色框等CSS以水平布局键/值图例。

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

我无法弄清楚如何做到这一点的跨浏览器的彩色框。我尝试过所有我能想到的浮动div/spans的组合，但是标签最终会在彩色框下面移动，或者我无法使用填充来分离图例中的每个键。

你会如何做到这一点？

来源

2011-10-24 Davis Dimitriov

如果你发布你最亲密的工作实例，以便有人能帮助你找出如何解决这将真正帮助它。 – Whetstone

@Whetstone我其实更感兴趣的是看到某人是如何解决这个问题的最佳方式，而不是简单地直接破解我的解决方案，直到它工作。 –

你不需要漂浮物来处理这类事情。真的，你有什么是一个对列表。目前该设置标签称为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>

来源

2011-10-24 15:35:44

不，他们确实不是。他们是'块'。然而，我同意这是标记它的正确方法。你只需要认识到，'display：inline'或'float：left'将是必要的。 –

@RyanKinal - 你是对的。更新。 –

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

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

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

很抱歉，如果您的文字是不是在框中还添加此...

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

例here

来源

2011-10-24 15:34:55 musefan

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

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

来源

2011-10-24 15:36:18

表格不应该用于布局。 –

我的数据是表格数据，那么这是最好的方法。如果不是，那么你应该避免这一点，因为它不是语义。 –

表格不应该用于“布局”，但他不是在讨论布局，只是显示数据。在投票前阅读问题。 –

检查出这个的jsfiddle，看看这是你在找什么http://jsfiddle.net/CQXk5/

来源

2011-10-24 15:36:20

这里有一个简单的例子：http://jsfiddle.net/MTB2q/

enter image description here

来源

2011-10-24 15:38:59 wsanville

很好的例子，非常感谢 –

这是一个很好的例子！ – Worker

这应该工作...

避免浮动，因为你特别提到跨浏览器，所以我假设你在leas t支持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;}

来源

2011-10-24 15:50:08 Andrew

CSS以水平布局键/值图例。

回答

相关问题