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

163
21

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


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

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


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

спросил(а) 2011-10-24T18:31:00+04:00 8 лет, 12 месяцев назад
1
Решение
145

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


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

ответил(а) 2011-10-24T18:35:00+04:00 8 лет, 12 месяцев назад
280

Вот простой пример: http://jsfiddle.net/MTB2q/

enter image description here

ответил(а) 2011-10-24T18:38:00+04:00 8 лет, 12 месяцев назад
120

проверьте этот jsfiddle и посмотрите, что вы ищете http://jsfiddle.net/CQXk5/

ответил(а) 2011-10-24T18:36:00+04:00 8 лет, 12 месяцев назад
57

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


Избегайте поплавков, поскольку вы конкретно упомянули кросс-браузер, поэтому я предполагаю, что вы хотя бы поддерживаете 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"> </div>
Blue
<div class="Green"> </div>
Green
<div class="Red"> </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;}

ответил(а) 2011-10-24T18:50:00+04:00 8 лет, 12 месяцев назад
59

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


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

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


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


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

Пример здесь

ответил(а) 2011-10-24T18:34:00+04:00 8 лет, 12 месяцев назад
41

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


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

ответил(а) 2011-10-24T18:36:00+04:00 8 лет, 12 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема