Sıralı liste css ile 1.1, 1.2, 1.3 (sadece 1, 2, 3,… yerine) gibi bir sonuç üretebilir mi?

201

Sıralı bir liste CSS ile 1.1, 1.2, 1.3 (sadece 1, 2, 3, ... yerine) gibi sonuçlar verebilir mi? Şimdiye kadar, kullanma list-style-type:decimal1.1, 1.2., 1.3 değil, sadece 1, 2, 3 üretti.

html css

— Richard77
kaynak

Kabul edilen cevabı Jakub Jirutka'nın karşılaştırmasını öneririm. Sanırım ikincisi daha da iyi.

— Frank Conijn

Zarif çözüm. Wikipedia'nın içerik bölümleri için bunun yerine neden ul kullandığına dair bir fikrin var mı?

— Mattypants

1

@davnicwil katılıyorum; Muhtemelen Eylül ayında yinelenen yanlış sırada uyguladım gibi görünüyor.

— TylerH

Harika, şimdi bana hiç gelmediği için garip hissediyorum, böyle basit bir hata olabilir - özür dilerim!

— davnicwil

290

Bunu yapmak için sayaçları kullanabilirsiniz :

Aşağıdaki stil sayfası iç içe liste öğelerini "1", "1.1", "1.1.1" vb.
OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

Misal

ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

Snippet'i genişlet

Daha fazla bilgi için Yuvalanmış sayaçlar ve kapsam bölümüne bakın .

— Bamya
kaynak

2

mükemmel cevap. Bunun desteği nedir?

— Jason McCreary

1

@Jason McCreary: Bu aşağı tarafı: Sayaçlar sürüm 8'e kadar IE'de desteklenmiyor .

— Gumbo

3

Bu çözüm küçük bir şeyi özlüyor: madde numarasını takip eden nokta. Standart liste stiline benzemiyor. Kural için bir nokta ekleyerek düzeltme li:before: content: counters(item, ".")". ";

— LS

4

Bu kötü bir cevap. Düzgün çalışmıyor. Aşağıdaki Jakub Jirutka'nın cevabına bir göz atın

— Mr Pablo

1

@ Gumbo biliyorum ve Jakub'un cevabı bana doğru numaralandırmayı verdi.

— Bay Pablo

237

Bu sayfadaki çözümlerin hiçbiri, tüm düzeyler ve uzun (sarılmış) paragraflar için doğru ve evrensel olarak çalışmaz. Değişken markör boyutu nedeniyle tutarlı bir girinti elde etmek gerçekten zor (1., 1.2, 1.10, 1.10.5,…); olası her girinti seviyesi için önceden hesaplanmış bir marj / dolgu ile bile “sahte” olamaz.

Sonunda gerçekten çalışan ve herhangi bir JavaScript gerektirmeyen bir çözüm buldum .

Firefox 32, Chromium 37, IE 9 ve Android Tarayıcı'da test edildi. IE 7 ve önceki sürümlerde çalışmaz.

CSS:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") " ";
}

Misal:

JSFiddle'da deneyin , Gist üzerinde çatallayın .

— Jakub Jirutka
kaynak

1

Bu tür bir kınama elde etmek için iyi iş çıkardın. Bununla birlikte, listelediğiniz ilk 2 girinti vakasının doğru ve yanlıştan ziyade bir tercih meselesi olduğunu iddia ediyorum. Durum 1 ve durum 2'yi düşünün - ikincisi, boşluklar bozulmadan önce çok daha fazla seviyede sıkmayı başarırken, yine de oldukça düzgün görünüyor. Ayrıca, MS Word ve varsayılan tarayıcı şekillendirme durum 2'nin her ikisini de kullanır. Sanırım bunu da yanlış yapıyorlar?

— Saul Fautley

2

@ saul-fautley Tipografi açısından yanlış. Deli sayıda iç içe düzeyli örnek, iç içe numaralandırmanın çok fazla düzey için uygun olmadığını gösterir, ancak bu oldukça açıktır. MS Words dizgi sistemi değil, sadece tipografisi zayıf olan bir belge işlemcisi. Varsayılan tarayıcı stili… oh, tipografi hakkında fazla bir şey bilmiyorsunuz, değil mi?

— Jakub Jirutka

3

Gerçekten tüm seviyeler ve uzun paragraflar için (teknik olarak) işe yarıyor. Düzine seviyeleri kullanmak mantıklıysa, bu teknik çözümle ilgisi olmayan başka bir soru. Mesele şu ki, diğer bazı çözümlerde olduğu gibi her yuvalama düzeyi için bir CSS kuralı önceden tanımlamanız gerekmez.

— Jakub Jirutka

4

Diğer cevaplarda doğal olarak "yanlış" bir şey olduğunu söylemesem de, eksik olduklarını söyleyebilirim. Bu cevap yerinde ve hatta değiştirdiğim korkunç derecede tuhaf tarzda bir sitede çalıştı.

— DanielM

2

@tremby: Tutarsızlık, "display: table" yerine li "display: table-row" kullanılarak çözülebilir. Bunun getirdiği sorun, li'nin tablo satırları her zaman içerikleri tarafından otomatik olarak boyutlandırıldığı için herhangi bir kenar boşluğu / dolgu kullanamamasıdır. Bu, "display: block" ile bir "li: after" eklenerek çözülebilir. Tam bir örnek için bkz. JsFiddle . Ekstra bir bonus olarak, sayıları doğru hizalamak için "li: before" öğesine "text-align: right" ekledim.

— mmlr

64

Seçilen cevap harika bir başlangıçtır, ancak temel list-style-position: inside;olarak liste öğelerinin stilini zorlayarak sarılmış metni okumayı zorlaştırır. Burada, sayı ve metin arasındaki kenar boşluğu üzerinde kontrol sağlayan ve sayıyı varsayılan davranışa göre sağa hizalayan basit bir çözüm bulunmaktadır.

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

JSFiddle: http://jsfiddle.net/3J4Bu/

— Saul Fautley
kaynak

Bir dezavantajı, her liste öğesinin sonuna bir nokta eklemesidir.

— Davin Studer

3

@Davin Studer: Her sayının sonuna, varsayılan oldavranışa göre yalnızca bir nokta ekler . Kolayca son silerek kaldırılabilir "."gelen contentmülkiyet, ama bu sadece bana biraz tuhaf görünüyor.

— Saul Fautley

14

Burada yayınlanan çözümler benim için iyi çalışmadı, bu yüzden bu soru ve aşağıdaki sorudakilerin bir karışımı yaptım: HTML'de çok düzeyli sıralı liste oluşturmak mümkün mü?

/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */

Sonuç:

ekran görüntüsü

Not: Kaynak kodu veya bu yayından gelenleri görmek istiyorsanız ekran görüntüsü: http://estiloasertivo.blogspot.com.es/2014/08/introduccion-running-lean-y-lean.html

— chelder
kaynak

1

Bu, tüm sayfadaki en iyi (ve en basit) çalışma cevabıdır.

— Bruno Toffolo

6

Not: Modern bir tarayıcıda iç içe numaralandırma oluşturmak için CSS kullanın . Kabul edilen cevaba bakınız. Aşağıdakiler sadece tarihsel ilgi içindir.counters

Tarayıcı contentve öğelerini destekliyorsa counter,

.foo {
  counter-reset: foo;
}
.foo li {
  list-style-type: none;
}
.foo li::before {
  counter-increment: foo;
  content: "1." counter(foo) " ";
}

<ol class="foo">
  <li>uno</li>
  <li>dos</li>
  <li>tres</li>
  <li>cuatro</li>
</ol>

Snippet'i genişlet

— kennytm
kaynak

Listeler yuvalandığında bu çözüm çok başarısız oluyor.

— LS

@ LS Seçicileri her zaman ihtiyaçlarınıza göre düzenleyebilirsiniz. .foo > ol > li.

— kennytm

1

Demek istediğim, "1" kodlu. tarzı. Alt liste üst listedeki ikinci öğenin alt öğesi olduğunda ne olur? "2" olarak görünmesini istiyorsunuz, ancak her zaman "1" olacaktır. burada kodlandığı için. Çözüm nedir? Mümkün olan her sayı için yeni stil setleri oluştur? Hayır. counters()İşlevi , işlev yerine yukarıdaki örneklerde olduğu gibi kullanın counter().

— LS

2

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="Sandro Alvares - KingRider">
    </head>
    <body>
        <style type="text/css">
            li.title { 
                font-size: 20px; 
                font-weight: lighter; 
                padding: 15px; 
                counter-increment: ordem; 
            }
            .foo { 
                counter-reset: foo; 
                padding-left: 15px; 
            }
            .foo li { 
                list-style-type: none; 
            }
            .foo li:before { 
                counter-increment: foo; 
                content: counter(ordem) "." counter(foo) " "; 
            }
        </style>
        <ol>
            <li class="title">TITLE ONE</li>
            <ol class="foo">
                <li>text 1 one</li>
                <li>text 1 two</li>
                <li>text 1 three</li>
                <li>text 1 four</li>
            </ol>
            <li class="title">TITLE TWO</li>
            <ol class="foo">
                <li>text 2 one</li>
                <li>text 2 two</li>
                <li>text 2 three</li>
                <li>text 2 four</li>
            </ol>
            <li class="title">TITLE THREE</li>
            <ol class="foo">
                <li>text 3 one</li>
                <li>text 3 two</li>
                <li>text 3 three</li>
                <li>text 3 four</li>
            </ol>
        </ol>
    </body>
</html>

Sonuç: http://i.stack.imgur.com/78bN8.jpg

— KingRider
kaynak

2

İki liste olduğunda ikinci bir sorunum var ve ikincisi DIV içinde İkinci liste 1'den başlamalıdır. Değil 2.1

<ol>
    <li>lorem</li>
    <li>lorem ipsum</li>
</ol>

<div>
    <ol>
        <li>lorem (should be 1.)</li>
        <li>lorem ipsum ( should be 2.)</li>
    </ol>
</div>

http://jsfiddle.net/3J4Bu/364/

EDIT: Sorunu bu http://jsfiddle.net/hy5f6161/ ile çözdüm

— robertad
kaynak

1

Yakın gelecekte ::markerpsuedo elemanını , sadece bir kod satırındaki diğer çözümlerle aynı sonucu elde etmek için kullanabilirsiniz .

Bu hala deneysel bir teknoloji olduğundan Tarayıcı Uyumluluk Tablosunu kontrol etmeyi unutmayın . 68 sürümünden başlayarak yalnızca Android için Firefox ve Firefox yazarken, bunu destekleyin.

Uyumlu bir tarayıcıda denendiğinde doğru şekilde oluşturulacak bir snippet:

::marker { content: counters(list-item,'.') ':' }
li { padding-left: 0.5em }

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

Snippet'i genişlet

Ayrıca konuyla ilgili smashingmagazine tarafından bu harika makaleye göz atmak isteyebilirsiniz .

— Tyrion
kaynak

0

Ben sipariş listesi ve sırasız liste bileşenleri karışımı ile bir liste kullandığım için bu 12 yılında yayınlanan çözüm eklemek gerekiyordu. içerik: no-close-quote biliyorum eklemek için garip bir şey gibi görünüyor, ama işe yarıyor ...

ol ul li:before {
    content: no-close-quote;
    counter-increment: none;
    display: list-item;
    margin-right: 100%;
    position: absolute;
    right: 10px;
}

— benjarlett
kaynak

0

Aşağıdakiler benim için çalıştı:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ") ";
  display: table-cell;
  padding-right: 0.6em;
}

li ol > li {
  margin: 0;
}

li ol > li:before {
  content: counters(item, ".") ") ";
}

Şuraya bakın: http://jsfiddle.net/rLebz84u/2/

ya da daha fazla ve haklı metin içeren http://jsfiddle.net/rLebz84u/3/

— Willy Wonka
kaynak

Bakmak için zaman kaybı. Daha önceki bir cevapla neredeyse aynı. İşaretçinin sonuna tek fark ")" eklenmiştir.

— juanitogan

0

diğer css ilk çocuk li yeniden boyutlandırmak istiyorsanız bu uygun bir koddur.

<style>
    li.title { 
        font-size: 20px; 

        counter-increment: ordem; 
        color:#0080B0;
    }
    .my_ol_class { 
        counter-reset: my_ol_class; 
        padding-left: 30px !important; 
    }
    .my_ol_class li { 
          display: block;
        position: relative;

    }
    .my_ol_class li:before { 
        counter-increment: my_ol_class; 
        content: counter(ordem) "." counter(my_ol_class) " "; 
        position: absolute;
        margin-right: 100%;
        right: 10px; /* space between number and text */
    }
    li.title ol li{
         font-size: 15px;
         color:#5E5E5E;
    }
</style>

html dosyasında.

        <ol>
            <li class="title"> <p class="page-header list_title">Acceptance of Terms. </p>
                <ol class="my_ol_class">
                    <li> 
                        <p>
                            my text 1.
                        </p>
                    </li>
                    <li>
                        <p>
                            my text 2.
                        </p>
                    </li>
                </ol>
            </li>
        </ol>

— sandeep kumar
kaynak