CSS aracılığıyla sıralı listelerde ikinci satır için girinti nasıl tutulur?

261

Liste madde işaretleri veya ondalık sayılar tüm üstün metin blokları ile aynı hizada olan bir "iç" listesine sahip olmak istiyorum. Liste girişlerinin ikinci satırları, ilk satırla aynı girintiye sahip olmalıdır!

Örneğin:

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 "liste stili konumu" için yalnızca iki değer sağlar - içeride ve dışarıda. "İç" ikinci satırlar, üst satırla değil liste noktaları ile aynı hizadadır:

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

Genişlik "dış" listem artık üstün metin bloklarıyla aynı hizada değil.

Denemeler genişlik metin girintisi, dolgu sol ve sol kenar boşluğu, sırasız listeler için çalışır, ancak liste ondalıklarının karakter sayısına bağlı olduğu için sıralı listelerde başarısız olurlar:

 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." "3" ile karşılaştırıldığında üstün metin bloğu ile aynı hizada değil. ve "4.".

Sıralı listelerin ve ikinci satır girintisinin sırrı nerede? Çaban için teşekkürler!

html css html-lists

— kernfrucht
kaynak

1

Kullanıcı Pali Madra bunu bir cevap olarak ekledi, ancak başka bir açıklama içermediği için silindi. Jsfiddle aradığın şey olabileceğini söyledi: jsfiddle.net/palimadra/CZuXY/1

— bfavaretto

Sadece dolgu sola ayarlamaya çalışın ...

— matzone

3

Sadece "temel liste hükmü" nü arayan birisinin bu soruya rastlaması durumunda , bu soruya bir göz atın ( stackoverflow.com/questions/17556496/… ) ve Natasha Banegas cevap.

— SunnyRed

Asıl soruya tek bir cevap bile gelmez. Asıl soru, listedeki rakamları nasıl sola hizalayacağınız, bu da ikinci veya sonraki bir satıra taştığında liste öğesinin metnini üstündeki öğe metniyle sola hizalamaktır. Varsayılan olarak - ve hemen hemen her cevapta - listenin rakamları sağa hizalanır ve liste öğelerinin metni sola hizalanır.

— Jessie Westlake

267

Güncelleme

Bu cevap eski. Aşağıdaki başka bir cevapta belirtildiği gibi, bunu çok daha basit bir şekilde yapabilirsiniz:

ul {
  list-style-position: outside;
}

Bkz. Https://www.w3schools.com/cssref/pr_list-style-position.asp

Orijinal Yanıt

Bunun henüz çözülmediğini görünce şaşırdım. Tarayıcının tablo düzeni algoritmasını (tabloları kullanmadan) şu şekilde 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/

resim açıklamasını buraya girin

IE8'de çalışması için eski :beforegösterimi bir iki nokta üst üste işaretiyle kullanın .

— user123444555621
kaynak

2

@Perelli foosadece rastgele bir dizedir (id) counter-reset, counter-incrementve counter()özelliklerini bağlamak için kullanılır .

— user123444555621

3

Ayrıca kullanarak sakat masa şeyler önleyebilirsiniz position: relativeüzerinde <li>ve position: absoluteoluşturulan içeriklere. Örnek için jsfiddle.net/maryisdead/kgr4k adresine bakın .

— maryisdead

2

@maryisdead Neden 40px? Sayaçlar bundan daha geniş olduğunda bu kırılacaktır . Tablo düzenini kullanmanın tüm amacı, tarayıcının içeriğe otomatik olarak sığmasıdır.

— user123444555621

5

Güzel, ama alt kenar boşluğunu nasıl kontrol ediyorsunuz? <li> yüksekliği yalnızca içindeki tablo hücresi elemanlarının yüksekliği ile belirlenir. Dolayısıyla, bu elemanlar üzerindeki kenar boşluğu, dolgu ve yüksekliğin etkisi yoktur. Bu sınırlama nasıl giderilir?

— hschmieder

3

Çok satırlı liste öğeleriniz varsa ve tutarlı dikey aralıklara ihtiyacınız varsa çözüm, seçiciye dikey kenarlık aralığı eklemektir, örneğin kenarlık aralığı: 0 3 piksel; Sayı her zaman yalnızca bir satır olduğundan tablo hücresindeki normal dolgulama çalışmaz.

— RemBem

208

Bunun aradığınızı yapacağına inanıyorum.

.cssClass li {
    list-style-type: disc;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em;
}

JSFiddle: https://jsfiddle.net/dzbos70f/

— JTOrlando
kaynak

21

sol dolgu eklerseniz daha iyi: 1em;

— Bence Gacsályi

16

Bu, bu sayfadaki tüm çözümlerin açık ara en iyi yanıtıdır. Diğerlerinden çok daha uygundur. Hangi cevabı seçeceğiniz konusunda tereddüt ediyorsanız, bunu seçin.

— Valentin Mercier

25

@loremmonkey Bu hızlı ve kirli ancak gerçek bir çözüm değil. İlk olarak, 1emgirinti boşluğuna eşit değildir. Çizgiler piksel olarak mükemmel şekilde hizalanmayacak. İkincisi, liste 10'a ulaştığında ne olacak? 100? Metin girintisi çalışmaz, hizalanmaz. Bu cevap aşağı oylanmalıdır.

— Güneşli

1

@Sunny Numaralandırılmış bir disk listesi değil, neden 100'e kadar saymalıyım? Yukarıdaki kodu kullanarak benim listeleri ile hiç sorun görmüyorum.

— lorem maymun

2

@loremmonkey Girinti değil 1em. oi60.tinypic.com/a0eyvs.jpg İlk liste öğesi yukarıdaki metin girintisi tekniğini kullanıyor. Normalde liste stili konumuyla nasıl göründüğüne kıyasla: dışında bu durumda bir piksel tarafından yanlış hizalanmış.

— Güneşli

39

Herhangi bir haksızlık olmadan en kolay ve en temiz yol, ul(veya ol) girintisini vermektir, şöyle :

ol {
  padding-left: 40px; // Or whatever padding your font size needs
  list-style-position: outside; // OPTIONAL: Only necessary if you've set it to "inside" elsewhere
}

Bu, kabul edilen cevapla aynı sonucu verir: https://jsfiddle.net/5wxf2ayu/

Ekran görüntüsü:

— Chuck Le Butt
kaynak

1

Sen uygulamak gerekebilir list-style-position: outsideiçin <li>.

— Alex

@Alex Bunu yalnızca mevcut bir stilin üzerine yazmaya zorlarsanız yapmanız gerekir ( developer.mozilla.org/en/docs/Web/CSS/list-style-position ).

— Chuck Le Butt

25

Bu kemanı kontrol edin:

http://jsfiddle.net/K6bLp/

CSS kullanarak ul ve ol'un elle girintilendiğini gösterir.

HTML

<head>
    <title>Lines</title>
</head>

<body>
    <ol type="1" style="list-style-position:inside;">
        <li>Text</li>
        <li>Text</li>
        <li >longer Text, longer Text, longer Text, longer Text    second line of longer Text        </li>
    </ol>  
    <br/>
    <ul>
        <li>Text</li>
        <li>Text</li>
        <li>longer Text, longer Text, longer Text, longer Text    second line of longer Text                </li>
    </ul>
</body>

CSS

ol 
{
    margin:0px;
    padding-left:15px;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -1em;
    margin-left: 1em;
}

ul
{
    margin:0;
    padding-left:30px;
}

ul li 
{
    margin: 0px;
    padding: 0px;
    text-indent: 0.5em;
    margin-left: -0.5em;
}

Ayrıca kemanını da düzenledim

http://jsfiddle.net/j7MEd/3/

Bir yere not edin.

— Deepan Babu
kaynak

teşekkür ederim, UL ve OL için 9 liste girişi için harika çalışıyor. Soru genişliğimde 11/12 şeyi açıkladığım temel sorun bu. Yukarıdaki örneğimde, sorunun farklı göründüğü, ancak sorunun özü aynı kaldığı için başka bir teknik kullanıyorum: Ondalık liste noktamda bir veya iki veya daha fazla sayı varsa - örneğin 1., 11. veya 111.! CSS ile tepki verebileceğim ve metin girintisini ve sol kenar boşluğunu sayısal sayıya ayarlayabildiğim hiçbir nokta görmüyorum.

— kernfrucht

Ol (bir basamaktan fazla) ikinci satır girintisi için, ben CSS çözmez düşünüyorum. Sadece jquery için gitmeliyiz.

— Deepan Babu

Ayrıca, için typeöznitelik <ol>HTML 5'te kullanımdan kaldırılmış gibi görünüyor style="list-style-type: ".

— AJ.

2

21 kişiniz bile ciddi mi? bu çalışmıyor. Gönderdiğinizden beri kodunuzu değiştirip değiştirmediğinizden emin değilim.

— JGallardo

9

Bir olveya ulCSS'de kenar boşluğunu ve dolguyu ayarlayabilirsiniz

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}

— luke2012
kaynak

ne yazık ki sorun bu çözüm tarafından çözülmüyor: ikinci satırlar, üst satırın genişliğini değil liste noktaları ile aynı hizada, yukarıdaki örneğe bakın

— kernfrucht

11 ve 12 jsfiddle.net/j7MEd/1 üst ve alt paragraflar ile aynı hizaya ve ben kod değiştirmedi. Bir şey mi kaçırıyorum?

— luke2012

Hayır, mesele bu değil. Asıl sorun, her liste noktasının ikinci (ve üçüncü vb.) Satırının ilk satırla aynı "girintiye" sahip olmamasıdır! (bkz. jsfiddle-örneği). Yukarıdaki sorumda, dolgu, kenar boşluğu vb. İle ilgili bir çözüm düşünüyoruz, ancak yalnızca Sırasız listelerde çalışıyor. Sipariş listesinde bu gibi yeni problemler ortaya çıkıyor 11/12. Yani asıl sorum şudur: Girintili şeyi (uestion'umun ilk örneğinde sunmuş olduğum gibi) 11/12 gibi problemleri olmadan sıralı listeler için nasıl yapabilirim.

— kernfrucht

Tamam özür dilerim seni! Bu tek yoldur .. tek sorun çapraz tarayıcı elde etmek için IE'de kenar boşluğu ve Firefox'ta dolgu ayarlamak gerekir. jsfiddle.net/j7MEd/2

— luke2012

7

Ben sadece 'bullet' listesini doldurmanın dışına koymanız gerektiğine inanıyorum.

li {
    list-style-position: outside;
    padding-left: 1em;
}

— KnownColor
kaynak

6

Bir aralık seçmek için CSS kullanabilirsiniz; bu durumda, 1-9 öğelerini listelemek istersiniz:

ol li:nth-child(n+1):nth-child(-n+9)

Ardından, bu ilk öğelerin kenar boşluklarını uygun şekilde ayarlayın:

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }

Burada iş başında görün: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

— LaFaucon
kaynak

5

Aşağıdaki CSS hile yaptı:

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}

— itoctopus
kaynak

4

Benim çözüm olarak oldukça aynıdır Pumbaa80 'ın biri, ama kullanmayı önermek display: tableyerine display:table-rowilişkin lielemanı. Yani böyle bir şey olacak:

ol {
    counter-reset: foo; /* default display:list-item */
}

ol > li {
    counter-increment: foo;
    display: table; /* instead of table-row */
}

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

Şimdi biz arasına aralanması için marjlarını kullanabilirsiniz lis'

— Alex
kaynak

1

Bu çözüme çok düşkündüm:

ul {
    list-style-position: inside;
    list-style-type: disc;
    font-size: 12px;
    line-height: 1.4em;
    padding: 0 1em;
}

ul li {
    margin: 0 0 0 1em;
    padding: 0 0 0 1em;
    text-indent: -2em;
}

— Corey Ballou
kaynak

tek sorunlu yazı tipi boyutu

— atilkan

0

Ol, ul listeleri isterseniz kenarlıklı bir tablo da kullanabilirsiniz: css'de yok.

— Casualbot
kaynak

sanırım bu anlamsal kurallarla ilgili iyi bir çözüm değil

— kernfrucht

0

CSS "liste stili konumu" için yalnızca iki değer sağlar - içeride ve dışarıda. "İç" ikinci satırlar, üst satırla değil liste noktaları ile aynı hizadadır:

Sıralı listelerde, müdahale olmadan, "liste-stil-pozisyonu" değerini "içeride" verirseniz, uzun bir liste öğesinin ikinci satırında girinti olmaz, ancak listenin sol kenarına geri döner (örn. öğenin sayısıyla sola yaslanacak). Bu sıralı listelere özgüdür ve sırasız listelerde olmaz.

Bunun yerine "list-style-position" değerini "outside" olarak verirseniz, ikinci satır ilk satırla aynı girintiye sahip olur.

Kenarlıklı bir listem vardı ve bu problemi yaşadım. "Liste-stil-konumu", "içeride" olarak ayarlandığında, listem istediğim gibi görünmüyordu. Ancak "list-style-position" "outside" olarak ayarlandığında, liste öğelerinin sayısı kutunun dışına düştü.

Bunu tüm liste için daha geniş bir sol kenar boşluğu ayarlayarak çözdüm, bu da tüm listeyi daha önce bulunduğu konuma geri itti.

CSS:

ol.classname {kenar boşluğu: 0; dolgu: 0;}

ol.classname li {kenar boşluğu: 0.5em 0 0 0; dolgu-sol: 0; liste stili-konum: dış;}

HTML:

<ol class="classname" style="margin:0 0 0 1.5em;">

— Chris
kaynak

-1

Tamam, geri döndüm ve bazı şeyleri anladım. Bu, önerdiğim şeylerin KABA BİR ÇÖZÜMÜ, ancak işlevsel gibi görünüyor.

İlk olarak, sayıları dizisiz bir dizi liste haline getirdim. Sıralanmamış bir listede normalde her liste öğesinin başında bir disk bulunur (

) bu yüzden CSS'yi liste stiline ayarlamanız gerekir: none;

Sonra tüm liste görüntüsünü yaptım: tablo satırı. İşte, neden kod yerine bu kodu yapıştırmıyorum?

<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Result</title>
</head>
<body>
    <div><ul>
        <li>1.</li>
        <li><p>2.</p></li>
        <li>10.</li>
        <li><p>110.</p></li>
        <li>1000.</li>
    </ul>
    </div>
    <div>
        <p>Some author</p>
        <p>Another author</p>
        <p>Author #10</p>
        <p>Author #110</p>
        <p>The one thousandth author today will win a free i-Pod!!!! This line also wraps around so that we can see how hanging indents look.</p>
        </div>
</body>
</html>'

CSS:

ul li{
list-style: none;
display: table-row;
text-align: right;

}

div {
float: left;
display: inline-block;
margin: 0.2em;

}

Bu, 2. div'deki metni, birinci div'deki sıralı listedeki numaralarla hizalar gibi görünüyor. Hem liste hem de metni bir etiketle kuşattım, böylece tüm div'lere satır içi bloklar olarak görüntülenmesini söyleyebilirim. Bu onları güzel bir şekilde sıraladı.

Kenar boşluğu, nokta ile metnin başlangıcı arasında boşluk bırakmak içindir. Aksi takdirde, birbirlerine karşı koşarlar ve göze batan bir şey gibi görünürler.

İşverenim, sarılmış metnin (daha uzun bibliyografik girişler için) sol kenar boşluğuyla değil, ilk satırın başlangıcıyla hizalanmasını istedi. Başlangıçta, pozitif bir kenar boşluğu ve negatif bir metin girintisi ile uğraşıyordum, ama sonra iki farklı div'e geçtiğimde, bunun metnin tümüyle dizilip div'in sol kenar boşluğundan dolayı hizalandığını fark ettim. metnin doğal olarak başladığı kenar boşluğuydu. Böylece, ihtiyacım olan tek şey boşluk eklemek için 0.2em'lik bir marjdı ve diğer her şey yüzerek dizildi.

Umarım OP benzer bir sorun yaşıyorsa bu yardımcı olur ... Onu anlamakta zorlandım.

— David
kaynak

-1

Aynı sorunu yaşadım ve user123444555621 yanıtını kullanmaya başladım . Ancak, ben de eklemek için gerekli paddingve borderher birine liher çünkü o çözüm izin vermez hangi libir olduğunu table-row.

İlk olarak, 'ın sayılarını counterçoğaltmak için a kullanırız ol.

Daha sonra bize girintiyi vermek display: table;için her birini live display: table-cellüzerine ayarladık :before.

Sonunda, zor kısmı. Bir bütün olarak bir tablo düzeni kullanmadığımızdan, olher birinin :beforeaynı genişlikte olduğundan emin olmamız gerekir . chBirimi , genişliği kabaca karakter sayısına eşit tutmak için kullanabiliriz . :before'S için basamak sayısı farklı olduğunda genişlikleri aynı tutmak için miktar sorguları uygulayabiliriz . Listelerinizin 100 öğe veya daha fazla olmayacağını bildiğinizi varsayarsak :before, genişliğini değiştirmek için yalnızca bir miktar sorgu kuralına ihtiyacınız vardır , ancak kolayca daha fazla ekleyebilirsiniz.

ol {
  counter-reset: ol-num;
  margin: 0;
  padding: 0;
}

ol li {
  counter-increment: ol-num;
  display: table;
  padding: 0.2em 0.4em;
  border-bottom: solid 1px gray;
}

ol li:before {
  content: counter(ol-num) ".";
  display: table-cell;
  width: 2ch; /* approximately two characters wide */
  padding-right: 0.4em;
  text-align: right;
}

/* two digits */
ol li:nth-last-child(n+10):before,
ol li:nth-last-child(n+10) ~ li:before {
  width: 3ch;
}

/* three digits */
ol li:nth-last-child(n+100):before,
ol li:nth-last-child(n+100) ~ li:before {
  width: 4ch;
}

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
</ol>

Snippet'i genişlet

— Jacob Alvarez
kaynak