Стилизация упорядоченных списков с помощью CSS - PullRequest
Новая
       1

Стилизация упорядоченных списков с помощью CSS

8 голосов
/ 10 апреля 2010

У меня есть упорядоченный список в HTML. Я хотел бы добавить стили только к числам (1,2,3, ...), а не к самим элементам списка.

Можно ли сослаться на эти цифры?

Спасибо!

Ответы [ 3 ]

5 голосов
/ 10 апреля 2010

CSS2 обеспечивает контроль над сгенерированным контентом , что позволит вам создавать стили автоматически сгенерированного контента независимо от остальной части элемента, используя псевдокласс :before. Вот решение, которое соответствует критериям контроля OP (цвет фона в перечислителе списка, но не элемента). 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head profile="http://gmpg.org/xfn/11">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">

    body { margin: 0; padding: 10px; }
    ol {
        counter-reset: item; 
        margin: 0;
        padding: 0;
    }
    li {
        display: block;
        padding: 10px 0;
        margin: 0 0 10px 0;
    }
    li:before { 
        content: counter(item);
            /* 
                To generate punctuation after the number, just precede or follow with a string: 
                content: "Chapter " counter(item) " >> ";  

                To make nested counters (1, 1.1, 1.1.1, etc.), use:
                content: counters(item, ".");
            */
        counter-increment: item; 

        background-color: #ddd;
        margin-right: 15px;
        padding: 10px;
    }
    ol li ol { margin-bottom: -10px; padding-top: 10px; }
    ol li ol li { margin: 10px 0 0 30px; }

    </style>
</head>

<body>

<ol>
    <li>Turtles</li>
    <li>Lizards
        <ol>
            <li>Salamanders</li>
            <li>Geckos</li>
        </ol>
    </li>
    <li>Velociraptors</li>
</ol>

</body>
</html>
3 голосов
/ 10 апреля 2010

Да, вы просто стилизуете элемент ol, а затем переопределяете стиль на элементе li. 

ol
{
    color: blue;
    font-style: italic;
}
ol li p
{
    color: black;
    font-style: normal;
}

с 

<ol>
    <li><p>Text</p></li>
    <li><p>Text</p></li>
    <li><p>Text</p></li>
</ol>

Вы можете изменить теги p на <divs>, если хотите, но если вы оставите их как p, вам придется убирать поля и отступы.

0 голосов
/ 17 июня 2011

Первоначально я просто собирался прокомментировать ответ cowbellemoo, поскольку он не работает в IE7, и я хотел объяснить, как добиться совместимости с IE7, но я полагаю, что мое решение - это совершенно другой ответ.

У него хороший ответ, но он не сработает в IE7. Так что, если это важно для вас, вот другой подход, который вы можете использовать, основываясь на этой статье A List Apart: http://www.alistapart.com/articles/taminglists/#custom

Наценка 

<ul>
    <li><span>01.</span> Text content</li>
    <li><Span>02.</span> More text content</li>
</ul>

CSS 

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
    text-indent: -1em;
}

Есть несколько вариантов, которые вы могли бы сделать, либо плавая <span> и задавая ему ширину и поле, либо устанавливая <li> в position:relative;, давая ему соответствующие отступы и абсолютно позиционируя ваш диапазон в это правильное место.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...