web-dev-qa-db-ja.com

括弧（a）を注文リストに追加するにはどうすればよいですか？すべてのブラウザで互換性があります

私はのように見せなければなりません

（a）

（b）

（c）

更新：

CSSの方法を見つけました

ol {list-style-type: none;}
li:before {content: "(" counter(section, lower-alpha) ") ";}
li { counter-increment: section;}

ただし、IE 7以下では機能しません。

jquerycssxhtml
19
Jitendra Vyas

これはカスタムカウンターで可能ですが、少なくともIE7-はそれをサポートしていません。他のいくつかはサポートしていないかもしれません。詳細については、こちらをご覧ください： http://www.quirksmode.org/css/counter.html

例：

li:before {
    content: "(" counter(mycounter,lower-latin) ")";
}
9
deceze

私はCSSを有効にしてmediawikiでこのコードスニペットを使用しています。これが古いバージョンのIEで機能するかどうかはわかりません...

{{#css:
  .laparent ol { counter-reset: item }
  .laparent li { display: block ; counter-increment: item; }
  .laparent li:before { content: " ("counter(item,lower-alpha)") "; }
}}
<ol class=laparent>
   <li> this is the first item;
   <li> this is the second item; or
   <li> this is the third item.
</ol>

出力：

(a) this is the first item;
(b) this is the second item; or
(c) this is the third item.
4
Allan

CSS3以降、問題は解決したようです。

style="list-style-type: parenthesized-lower-latin;"

http://www.w3.org/TR/2011/WD-css3-lists-20110524/

1
Olivier

（a）（b）（c）は取得できません。

ただし、canは、角かっこなしで文字を取得できます。

<ul style="list-style-type: lower-latin;">...</ul>

http://www.w3schools.com/CSS/tryit.asp?filename=trycss_list-style-type_all を参照してください。

0
Amy B

これらはあなたのオプションです W3Cによると。

CSSではそれは不可能です。 javascript（または同様のもの）を使用してカスタムリストを作成する必要があります。

0
jay

代わりに段落を作成しました。段落をインデントしてから、テキストインデントを使用して最初の行を引き出し、自分で番号を付けました。

.list_indent {
margin-left:48px;
}
.list_indent p {
text-indent:-26px;
}

<div class="list_indent">  
<p> (1)&nbsp;&nbsp;The recruitment report and a copy of the blah and blah and blah and blah and blah and blah and blah and blah.;
</p>   
<p> (2)&nbsp;&nbsp;A copy of the blah and blah and blah and blah and blah and blah and blah and blah.
</p>     
<p> (3)&nbsp;&nbsp;Recruitment.
</p>   
</div>
0
daniel kessler

これを行うための組み込みの方法はありません。つまり、（楽しい）ハックの土地に入るということです。

2つの括弧の背景画像を試すことができます。

0
roufamatic

または、ブラウザのフォールバックを気にせずに、テキスト数を手動で追加することもできます。どのブラウザでも動作します！

ul.abc-list {
  list-style: none;
  padding-left: 30px;
}
ul.abc-list > li > span.counter {
  position: absolute;
  margin-left: -20px;
  /*if you want to right align the text
   * 
   * width: 15px;
   * text-align: right;
   */
}
<ul class="abc-list">
  <li><span class="counter">a)</span> One</li>
  <li><span class="counter">b)</span> Two</li>
  <li><span class="counter">c)</span> Three</li>
  <li><span class="counter">d)</span> Four</li>
  <li><span class="counter">e)</span> Five</li>
  <ul>
0
Lasithds