CSS для размещения ключей/значений легенда по горизонтали.

Я создаю горизонтальную легенду в html/css. У меня есть цветная коробка с рядом с ней текста, затем некоторое пространство, затем еще одна цветная коробка с текстом, пробелом и т.д.

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

Я не могу понять, как сделать этот кросс-браузер. Я пробовал все комбинации плавающих divs/spans, о которых я могу думать, но либо ярлык попадает под цветную коробку, либо я не могу получить отступы для работы, чтобы отделить каждый ключ от легенды.

Как вы это сделаете?

ОТВЕТЫ

Ответ 1

Вам не нужны поплавки для такого рода вещей. На самом деле у вас есть список пар. Для этого есть набор тегов, который называется список определений:

<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>

Ответ 4

Не нужно использовать плавающие div. Попробуйте это

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

(добавьте ширину и высоту, если DIV не имеет содержимого)

Извините, если ваш текст не находится в поле, также добавьте это...

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

Пример здесь

Ответ 5

Это должно работать...

Избегайте поплавков, поскольку вы конкретно упомянули кросс-браузер, поэтому я предполагаю, что вы хотя бы поддерживаете IE7. IE7 обматывает всплывающие окна в виде неприятного способа, поэтому я предложил встроенные divs.

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;}

Ответ 6

Попробуйте использовать небольшую таблицу и использовать цвета фона.

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