Sağ parantezli sıralı liste (HTML) alt alfa?

83

Sıralı liste için varsayılan alt alfa liste türü bir nokta '.' Kullanır. A) ... b) ..vb yerine sağ parantez kullanmanın bir yolu var mı?

html css

— Tony_Henrich
kaynak

3

Belki cevaplardan biri doğru

— seçilebilir

165

İşte güzel bir çözüm. (Dürüst olmak gerekirse, buna kendimi şaşırttım.) CSS'de sayaçlar adı verilen bir şey var , örneğin her başlıkta otomatik bölüm numaraları ayarlayabilirsin. Biraz değişiklik size aşağıdakileri verir; Dolgu vb. Şeyleri kendiniz çözmeniz gerekir.

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

<span>custom list style type (v1):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

Snippet'i genişlet

Tüm modern tarayıcılarda ve IE9 + (ve muhtemelen IE8'de ancak hatalı olabilir) çalışır.

Güncelleme: İç içe geçmiş listelerin ana stili almasını önlemek için alt öğe seçici ekledim. trejder ayrıca, liste öğesi hizalamasının da bozuk olduğu yorumlarında iyi bir noktaya işaret ediyor. Bir 456bereastreet üzerinde makale kesinlikle sayaç yerleştirilmesini içeren iyi bir çözümü vardır.

ol {
    counter-reset: list;
}
ol > li {
    list-style: none;
    position: relative;
}
ol > li:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}

<span>custom list style type (v2):</span>
<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

Snippet'i genişlet

İç içe geçmiş listeleri de içeren sonucu gösteren bir jsFiddle burada .

— Hoşnutsuz Keçi
kaynak

1

Haklısın, bu IE6'da çalışmıyor. Ancak iyi haber, Firefox 3.5.3'te çalışıyor.

— mouviciel

1

Aslında daha iyi olurdu: ol {counter-reset: list; } Birden fazla ols olduğunda orijinal olan çalışmaz.

— Feng Jiang

1

Bilginize, alfabetik yerine numaralandırılmış bir liste almak için , lower-alpha. Yani contentdeğer şu olacakcounter(list) ") ";

— Trevan Hetzel

1

Bunun% 100 gerçek numaralandırma olmadığını eklememe izin verin. Çok satırlı öğelerde farkı görebilirsiniz. Olarak , normal listeleri metin bloğunun önce ayakta gibi kurşun veya sayı görünüyor, her satır aynı girintisi (standart mermi ya da numaraları kullanılarak) bu yüzden. Yukarıdaki çözümle, her bir sonraki satır numaralandırmanın altında başlar ve biraz girintili değildir. Bu, bunun gerçekten düzgün bir çözüm olduğu gerçeğini değiştirmez! :>

— trejder

Artı: Bu, çok seviyeli listelerde tamamen başarısız olur ( jsFiddle'daki örneğim ).

— trejder

11

DisgruntledGoat'ın cevabından yola çıkarak, ihtiyaç duyduğum alt listeleri ve stilleri desteklemek için genişlettim. Birine yardım etme ihtimaline karşı burada paylaşmak.

https://jsfiddle.net/0a8992b9/ çıktılar:

(i)first roman
    (a)first alpha
    (b)second alpha
    (c)third alpha
    (d)fourth alpha
(ii)second roman
(iii)third roman
    (a)first alpha
    (b)second alpha

— Fydo
kaynak

1

+1 Alfa için bir sıfırlama yaptınız. bu bana çok yardımcı oldu. Çok teşekkürler. Alfa sınıfına sahip olmayan biri ol [style * = "list-style-type: lower-alpha;"]

— SK kullanabilir.

Bir mermi noktası yerine kullanılan mektubun sağında metin kalırken bunu elde etmenin bir yolu var mı? yani, metnin mektubun altına

— kaydırılmaması

@sabliao için negatif bir değer katmak text-indentiçin lidüzeyinde

— Tyler James Young

3

Bunu CSS'ye eklemek bazı ilginç sonuçlar verdi. Yakındı ama puro yoktu.

li:before {
    display: inline-block;
    width: 1em; 
    position: relative;
    left: -0.5em; 
    content: ')'
}

----- Yorumlarda Iazel'den gelen çözümü içerecek şekilde düzenlendi -----

Çözümünüzü mükemmelleştirdim:

li {
    position: relative;
}
li:before {
    display: inline-block;
    width: 7px;
    position: absolute;
    left: -12px;
    content: ')';
    background-color: #FFF;
    text-align: center;
}

Arka plan ve position: absolutehile yaptı!

— Temalar
kaynak

Çözümünüzü mükemmelleştirdim:

li { position: relative; } li:before { display: inline-block; width: 7px; position: absolute; left: -12px; content: ')'; background-color: #FFF; text-align: center; }

Arka plan ve konum: mutlak hile yaptı! :)

— Iazel

-9

Bu benim için IE7, FF3.6, Opera 9.64 ve Chrome 6.0.4'te çalışıyor:

<ol start="a" type="a" style="font-weight: normal;">
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span> content for line number one;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number two;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number three;</li> 
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number four;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number five;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number six;</li>
</ol>

bu satır içi çünkü bir e-posta için kodlanmıştır, ancak asıl nokta, yayılma alanının bir içerik bloğu görevi görmesi ve pareni, liste numaralarıyla aynı hizaya gelecek şekilde negatif sol bölgeye çekmesidir. iki marj, IE7 ve FF farklılıklarını telafi etmektir

Bu yardımcı olur umarım.

— Uranoz
kaynak

1

Bunun olmaması gerektiğinden emin misin display:inline-block;?

— JaredMcAteer

Bu bir kesmedir çünkü pareni otomatik olarak oluşturulan "a", "b", vb. Karakterin yanına yerleştirmeye çalışırken yazı tipi boyutuna bağlıdır. Eğer böyle bir şey yapacaksanız, list-style-type: none kullanmalı ve sadece pareni oluşturmaya çalışmaktansa "a)" nın tamamını kendiniz oluşturmalısınız.

— Charles Kendrick