首页 文章

CSS水平布局键/值图例 .

提问于
浏览 次
17

我在html / css中创建了一个水平图例 . 我有一个彩色的盒子，旁边有一些文字，然后是一些空间，然后是另一个带有文字，空格等的彩色盒子 .

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

我无法弄清楚如何跨浏览器这样做 . 我已经尝试了所有可以想到的浮动div / span的组合，但是标签最终会出现在彩色框下面，或者我无法使用填充来分隔图例中的每个键 .

你会怎么做？

html css

6 回答

  • 1

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

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

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

    对不起，如果您的文字不在框中也添加此...

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

    示例here

    回复于
  • 1

    你不需要漂浮物来做这种事情 . 你真的拥有一对配对清单 . 有一个标签集为definition list：

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

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

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

    这些是默认的内联 block . 从那里你可以设置像这样的元素对：

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

      dt, dd
      {
         display: inline;
      }       
</style>
    回复于
  • 8

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

    enter image description here

    回复于
  • 55

    看看这个jsfiddle，看看这是不是你要找的http://jsfiddle.net/CQXk5/

    回复于
  • 14

    这应该工作......

    避免浮动，因为你特别提到跨浏览器，所以我假设你至少支持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;}
    回复于
  • 0

    尝试使用小 table 并使用背景颜色 .

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

相关问题