SORU
3 Mayıs 2012, PERŞEMBE


Nasıl CSS ile sipariş listelerinde ikinci satır için girinti tutmak için mi?

Bir "liste madde işaretlerini ya da ondalık sayılar üstün metin blokları ile yıkayın." listesi ile içeride devam etmek istiyorum Liste girdileri ikinci satır ilk satırın aynı girinti var!

E. g.:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec quam felis,

1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
   second line of longer Text
4. Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. 

CSS onun için sadece iki değer "-style-position list" - içeride ve dışarıda. "İçerden" listesi ile aynı hizada puan değil üstün satır ile ikinci satır:

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text

"Listemi üstün metin blokları artık. oturmaması "dış genişlik

Deneyler metin-girinti, doldurma-sol ve kenar boşluğu-sol sırasız listeler için çalışmak ama karakter liste-ondalık sayı bağlı olduğu için Sipariş listeleri için başarısız genişlik:

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 Aenean commodo ligula eget dolor. 

 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
    second line of longer Text
 4. Text
11. Text
12. Text

"11." ve "12." üstün metin bloğunu göre ile aynı hizada değil "3. ve 4.".

Nereden sipariş listeleri ve on-line ikinci girinti sırrı? Çabalarınız için çok teşekkür ederim!

CEVAP
7 Temmuz 2013, Pazar


Bu henüz çözülmemiş gördüğüme şaşırdım. Bu şekilde tarayıcının masa düzeni algoritması (tablo kullanmadan) kullanabilirsiniz:

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

Demo: http://jsfiddle.net/4rnNK/1/

enter image description here

Bu işi kolaylaştırmanın IE8, bir kolon ile :before eski gösterimde kullanın.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • AFISHAL

    AFISHAL

    7 Mart 2009
  • GFX Tutorials

    GFX Tutorial

    12 AĞUSTOS 2013
  • Subscribe!!

    Subscribe!!

    3 EKİM 2009