1

順序付きリストがあります

<ol>
    <li>something good</li>
    <li>even better</li>
    <li>possibly the best</li>    
</ol>

通常は次のように表示されます。

  1. 何か良い
  2. さらに良い
  3. おそらく最高

次のように表示させる方法はありますか？

a1。何か良い

a2. さらに良い

a3. おそらく最高

そして、次のリストは次のようになります。

b1. かくかくしかじか

b2. 2 番目のリスト項目

ありがとう..一般的な質問は、数字だけでなく文字と記号も欲しいということです。

4

5 に答える 5

3

このページを検索すると、解決策が得られた2つの答えが見つかりました。

CSSのカウンターインクリメント

HTMLリストスタイルタイプのダッシュ

私が作成したフィドルの1つを再利用して、ニーズに合ったものを作成します。

http://jsfiddle.net/DDNEB/1/

リストには、次のものが必要です。

ol {counter-reset: chapter 1; list-style: none;}

これにより、変数を作成できます。それで：

ol li+li {counter-increment: chapter 1; list-style: none;}

liごとにインクリメントしますそして最後に：

ol li:before {content: "a" counter(chapter) ".";}​

以前のコンテンツは、指定されたコンテンツを作成します。この場合、a（bなどで変更）+数値+。。

それが役に立てば幸い。

于 2012-06-24T09:13:37.703 に答える
1

Add this to your CSS

.A li:before 
   {
    content: "A";
   }
.B li:before 
   {
    content: "B";
 }

And change your list to something like this:

<ol class="A">
    <li>something good</li>
    <li>even better</li>
    <li>possibly the best</li>    
</ol>
<ol class="B">
    <li>something good</li>
    <li>even better</li>
    <li>possibly the best</li>    
</ol>
于 2012-06-24T09:18:17.857 に答える
0

これをCSSに追加します。

.A ol {list-style: none; counter-reset: chapter 1;}
.A ol li+li {counter-increment: chapter 1; list-style: none;}
.A ol li:before {content: "a" counter(chapter) ". ";}


.B ol {list-style: none; counter-reset: chapter 1;}
.B ol li+li {counter-increment: chapter 1; list-style: none;}
.B ol li:before {content: "b" counter(chapter) ". ";}

そしてこのようにしてください：

<div class="A">
    <ol>
        <li>something good</li>
        <li>even better</li>
        <li>possibly the best</li>             
    <ol>
</div>
<div class="B">
    <ol>
        <li>something good</li>
        <li>even better</li>
        <li>possibly the best</li>           
    <ol>
</div>

ここをクリック！_ これも機能します。

于 2012-06-24T13:31:42.543 に答える
0

これを試してください: http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_ex

于 2012-06-24T09:28:29.283 に答える
0

これはそれを行う1つの方法です...あなたが望むものではありませんが...

<ol type="a">
    <li>
        <ol type="1" start="1">
            <li>something good</li>
            <li>even better</li>
            <li>possibly the best</li>
        </ol>
    </li>
    <li>
        <ol type="1" start="1">
            <li>something good</li>
            <li>even better</li>
            <li>possibly the best</li>
        </ol>
    </li>
</ol>
于 2012-06-24T09:02:24.010 に答える