Wie fügt man Klammern (a) zur geordneten Liste hinzu? kompatibel in allen Browsern

Question

Ich habe zu zeigen, wie

(a)

(b)

(c)

Update:

ich einen CSS Weg gefunden

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

aber es funktioniert nicht in IE 7 und niedriger.

Answer 1

Sie können nicht (a) (b) (c) erhalten.

Sie können jedoch den Brief erhalten, ohne die Klammern:

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

Siehe http://www.w3schools.com/CSS/tryit.asp?filename=trycss_list-style-type_all

Answer 2

These are your options nach W3C.

Mit CSS ist es nicht möglich. Sie müssten eine benutzerdefinierte Liste mit Javascript (oder ähnlich) erstellen.

Answer 3

Dies ist mit benutzerdefinierten Indikatoren möglich, aber zumindest IE7- unterstützt es nicht, einige andere auch nicht. Sehen Sie hier für weitere Details: http://www.quirksmode.org/css/counter.html

Ex:

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

Answer 4

Es gibt keine eingebaute Möglichkeit, dies zu tun. Was bedeutet, dass du das Land der (lustigen) Hacks betrittst.

Sie könnten ein Hintergrundbild von zwei Klammern versuchen.

Answer 5

Ich habe stattdessen Absätze gemacht. Ich habe den Absatz eingerückt und dann die erste Zeile mit einem Texteinzug herausgezogen und diese selbst nummeriert.

.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> 

Answer 6

Da CSS3 scheint das Problem gelöst:

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

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

Answer 7

Oder Sie können einfach den Text manuell Fallbacks, ohne yo Sorgen über Browser zählen hinzufügen. Funktioniert in jedem Browser!

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>

Answer 8

Ich benutze diesen Code-Schnipsel in mediawiki mit CSS aktiviert. Ich bin mir nicht sicher, ob dies in älteren Versionen von IE funktioniert ...

{{#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> 

Ausgänge:

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