我在html / css中创建一个水平的图例.我有一个彩色的盒子,旁边有一些文字,然后是一些空间,然后是一些彩色的盒子,一些文字,一个空格等.
[blue] - LabelA [green] - LabelB [red] - LabelC
我不知道如何做这个跨浏览器.我已经尝试过我可以想到的浮动div /跨度的所有组合,但是标签最终会在彩色框下方,或者我无法获得填充来分隔图例中的每个键.
你会如何做到这一点
解决方法
你不需要漂浮这种事情.真的你有的是一对列表.有一个名为
definition list的标签集：
<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>
