html – CSS水平布局键值图例.

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

总结

以上是内存溢出为你收集整理的html – CSS水平布局键/值图例.全部内容，希望文章能够帮你解决html – CSS水平布局键/值图例.所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。