Текстовые маркеры в списках

HTML и CSSXSLTJavaScriptИзображенияСофтEtc
Владимир Токмаков

25 января 2007


Задача.

Заменить стандартные маркеры в списках длинными тире.

При изменении межстрочного интервала (CSS-свойство line-height) потребуется исправить строки 24 и 36.

Как это выглядит в браузере

  • — Обычное тире для сравнения.
  • Параграф. И он не переносится на другую строчку, как в предыдущем варианте.

    Еще один параграф с отступами.

  • Вложенный нумерованный список:
    1. Ну и ненумерованный:
      • А вот и знак — ® в теге <sup>. Он увеличивает высоту строки, и из-за этого наше тире сбивается в некоторых браузерах.
      • Но исправить это — довольно просто®.
01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
71 
72 
73 
74 
75 
76 
77 
78 
79 
80 
81 
82 
83 
<style type="text/css">
    .example p
    , .example ul
    , .example ol
    {
        padding: 0;
        margin: 1em 0;
    }
    .example li
    {
        margin: 0.5em 0 0.5em 1.3em;
    }
    .example ul
    {
        list-style-type: none;
        //list-style-image: url('li.gif');
    }
    .example ul li
    {
        padding: 0;
        behavior: expression(
            ( !this.before && parentNode && parentNode.tagName == 'UL' )
            ?
                ( this.before = true )
                & ( parentNode.style.listStyleImage = 'none' )
                & (
                    ( this.firstChild && this.firstChild.firstChild )
                    ?
                        ( this.firstChild.style.marginTop = '-1.2em' )
                        & ( this.firstChild.style.position = 'relative' )
                    : ''
                )
                & ( eNOBR = document.createElement( '<nobr style="position: relative; display: block; width: 1.25em; left: -1.25em; margin: 0 -1.25em -1.2em 0;" />' ) )
                & ( eNOBR.innerHTML = '&mdash;&nbsp;' )
                & ( this.insertBefore( eNOBR, this.firstChild ) )
            : ''
        );
    }
    .example ul>li:before
    {
        content: '\2014\a0';
        float: left;
        margin-left: -1.25em;
    }
    .example ul>li>*:first-child:-moz-first-node
    {
        margin-top: -1.2em;
    }
    .example ul>li>*
    {
        text-indent: 0;
    }
    .example .sup
    {
        position: relative;
        top: -0.5em;
        font-size: 0.75em; //font-size: 0.89em;
        line-height: 0;
        vertical-align: baseline;
    }
</style>
<div class="example">
    <ul>
        <li>&mdash; Обычное тире для сравнения.</li>
        <li>
            <p>Параграф. И&nbsp;он не&nbsp;переносится на&nbsp;другую строчку,
                как в&nbsp;<a href="../css_content_in_ie/">предыдущем варианте</a>.</p>
            <p>Еще один параграф с&nbsp;отступами.</p>
        </li>
        <li>Вложенный нумерованный список:
            <ol>
                <li>Ну и&nbsp;ненумерованный:
                    <ul>
                        <li>А&nbsp;вот и&nbsp;знак&nbsp;&#151; <sup>&reg;</sup> в&nbsp;теге <code>&lt;sup&gt;</code>.
                            Он&nbsp;увеличивает высоту строки, <nobr>и из-за</nobr> этого наше тире сбивается в&nbsp;некоторых браузерах.</li>
                        <li>Но&nbsp;исправить это&nbsp;&#151; довольно
                            просто<sup class="sup">&reg;</sup>.</li>
                    </ul>
                </li>
            </ol>
        </li>
    </ul>
</div>