Html CSS 水平布局键/值图例。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7878076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS to lay out keys/values legend horizontally.
提问by Davis Dimitriov
I am creating a horizontal legend in html/css. I have a colored box with some text next to it, then some space, then another colored box with some text, a space, etc.
我正在 html/css 中创建一个水平图例。我有一个彩色框，旁边有一些文本，然后是一些空格，然后是另一个带有一些文本、空格等的彩色框。
[blue] - LabelA [green] - LabelB [red] - LabelC
I can't figure out how to do this cross browser. I have tried all combinations of floating divs/spans I can think of, but either the label ends up going underneath the colored box or I can't get padding to work to separate each key in the legend.
我不知道如何做这个跨浏览器。我已经尝试了所有我能想到的浮动 div/span 的组合，但要么标签最终位于彩色框下方，要么我无法使用填充来分隔图例中的每个键。
How would you do this?
你会怎么做？
采纳答案by Rob Allen
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 inlineblockby default. From there you can style the pairs of elements like so:
这些是默认的。从那里你可以像这样设置元素对的样式：inlineblock
<style>
dl
{
width: 200px;
background: #fff;
border: 1px solid #000;
padding: 5px 15px;
}
dt, dd
{
display: inline;
}
</style>
回答by wsanville
回答by Tim Banks
check out this jsfiddle and see if this is what you are looking for http://jsfiddle.net/CQXk5/
看看这个 jsfiddle，看看这是否是你正在寻找的http://jsfiddle.net/CQXk5/
回答by Andrew
This should work...
这应该工作...
Avoided floats as you specifically mentioned cross browser, so I assume you are at least supporting IE7. IE7 wraps floats in kind of a nasty way which is why I suggested inline divs.
避免浮动，因为你特别提到跨浏览器，所以我假设你至少支持 IE7。IE7 以一种讨厌的方式包装浮动，这就是为什么我建议使用内联 div。
DOCTYPE HTML
文档类型 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
HTML
<div class="Legend">
<div class="Blue"> </div>
Blue
<div class="Green"> </div>
Green
<div class="Red"> </div>
Red
</div>
CSS
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;}
回答by musefan
No need to use floating divs. Try this
无需使用浮动 div。尝试这个
DIV.LegendItem
{
display:inline-block;
margin-right:20px;
}
(add width and height if DIV has no content)
（如果 DIV 没有内容，则添加宽度和高度）
Sorry if your text is not in the box also add this...
抱歉，如果您的文本不在框中，请添加此...
SPAN.LegendText
{
display:inline-block;
margin-right:20px;
}
Example here
示例在这里
回答by Tim Withers
Try using a small table and using background colors.
尝试使用小桌子并使用背景颜色。
<table>
<tr>
<td style="backgroundcolor:red; width:5px"> </td>
<td>- Red</td>
</tr>
</table>
回答by Marinov
Based on Rob Allen answer, this is a quick and simple legend using definition lists:
dl, dt and dd are display block by default. Since we want the dt and dd to be on the same line, we use display: inline-block. (Inline block is important for us to be able to control the width and height of the colored square)
根据 Rob Allen 的回答，这是一个使用定义列表的快速而简单的图例：
dl、dt 和 dd 默认是显示块。由于我们希望 dt 和 dd 在同一行，我们使用 display: inline-block。（内联块对我们能够控制彩色方块的宽度和高度很重要）
HTML
HTML
<dl>
<dt class="red"></dt>
<dd>Existing clients</dd>
<dt class="yellow"></dt>
<dd>New clients</dd>
</dl>
CSS
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:See the result here
结果：在此处查看结果
