0

私は非常に単純なリストを持っています

<ol>
    <li>item 1</li>
    <li>item 2</li>
</ol>

各リストを で始める必要がありStep X:ます。もちろん、それを手動で書き出すこともできますが、CSS によって自動的に構築された方がよいでしょう。何かのようなもの：

ol li:before {
    content: "Step $";
}

...リストの位置を取得して挿入でき$ます。理想的には、次のようにも表示されます。

ステップⅩ

ステップの内容。この行の上に余分な改行はありません

...しかし、何よりも必要なのは、正しい内容の「ステップ X」です。

4

2 に答える 2

1

カウンターのことですか？

このような？

Step 1 bla bla bla
Step 2 bla bla bla

もしそうなら...

<body>
    <ol>
        <li></li>
        <li></li>
    </ol>
</body>

そしてCSS：

body 
{
    counter-reset: stepx;
}
li:before
{
    counter-increment: stepx;
    content: "Step "counter(stepx);
}

IE8は、！DOCTYPEが指定されている場合にのみこれらのプロパティをサポートします。

于 2013-02-25T17:13:26.920 に答える
1

CSS2.1 のカウンター:

ol {
    counter-reset: step;
}

ol li:before {
    counter-increment: step;
    content: "Step " counter(step);
    /* You may need to add : and/or space, e.g. "Step " counter(step) ": "; */
}

適切なブラウザー サポート (IE8+ およびその他すべての主要なブラウザー)、および:before疑似要素 (Step X テキスト) を個別にスタイル設定できます。ブロックとして表示しない限り、改行は表示され:beforeず、:after疑似要素はデフォルトでインラインで表示されます。

于 2013-02-25T17:10:18.537 に答える