Bagaimana cara menjaga indentasi untuk baris kedua dalam daftar yang dipesan melalui CSS?

260

Saya ingin memiliki daftar "di dalam" dengan daftar bullet atau angka desimal yang rata dengan blok teks superior. Baris kedua dari entri daftar harus memiliki indentasi yang sama seperti baris pertama!

Misalnya:

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 hanya menyediakan dua nilai untuk "list-style-position" - di dalam dan di luar. Dengan "bagian dalam" baris kedua rata dengan poin daftar bukan dengan garis superior:

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

Lebar "di luar" daftar saya tidak rata dengan blok teks unggul lagi.

Eksperimen lebar teks-indentasi, padding-kiri dan margin-kiri bekerja untuk daftar tidak berurutan tetapi mereka gagal untuk daftar berurutan karena itu tergantung pada jumlah karakter daftar-desimal:

 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." dan "12." tidak rata dengan blok teks superior dibandingkan dengan "3." dan "4.".

Jadi di mana rahasianya tentang daftar pesanan dan indentasi baris kedua? Terima kasih atas usaha Anda!

html css html-lists kernfrucht
sumber
1
Pengguna Pali Madra menambahkan ini sebagai jawaban, tetapi terhapus karena tidak mengandung perluasan lebih lanjut. Dia mengatakan jsfiddle mungkin yang Anda cari: jsfiddle.net/palimadra/CZuXY/1
bfavaretto
Cobalah untuk mengatur padding-left only ...
matzone
3
Jika seseorang menemukan pertanyaan ini, yang hanya mencari "indentasi daftar dasar", lihat pertanyaan ini ( stackoverflow.com/questions/17556496/… ) dan Natasha Banegas menjawab.
SunnyRed
Tidak ada satu jawaban yang menjawab pertanyaan aktual. Pertanyaan sebenarnya adalah bagaimana menyelaraskan kiri digit dalam daftar, sementara secara terpisah kiri menyelaraskan teks item daftar dengan teks item di atasnya ketika teks itu meluap ke baris kedua atau berikutnya. Secara default - dan di hampir setiap jawaban - digit daftar disejajarkan dengan benar dan teks dari item daftar disejajarkan dengan kiri.
Jessie Westlake

Jawaban:

267

Memperbarui

Jawaban ini sudah usang. Anda dapat melakukan ini lebih sederhana, seperti ditunjukkan dalam jawaban lain di bawah ini:

ul {
  list-style-position: outside;
}

Lihat https://www.w3schools.com/cssref/pr_list-style-position.asp

Jawaban Asli

Saya terkejut melihat ini belum diselesaikan. Anda dapat menggunakan algoritma tata letak tabel browser (tanpa menggunakan tabel) seperti ini:

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/

masukkan deskripsi gambar di sini

Untuk membuatnya bekerja di IE8, gunakan :beforenotasi warisan dengan satu titik dua.

pengguna123444555621
sumber
2
@Perelli foohanyalah string arbitrer (id), digunakan untuk menghubungkan properti counter-reset, counter-incrementdan counter().
user123444555621
3
Anda juga dapat menghindari hal-hal tabel miring dengan menggunakan position: relativepada <li>dan position: absolutepada konten yang dihasilkan. Lihat jsfiddle.net/maryisdead/kgr4k untuk contoh.
maryisdead
2
@maryisdead Kenapa 40px? Itu akan pecah ketika penghitung lebih luas dari itu . Inti dari penggunaan tata letak tabel adalah bahwa browser akan secara otomatis sesuai dengan konten.
user123444555621
5
Bagus, tapi bagaimana Anda mengontrol margin bawah <li>? Ketinggian <li> semata-mata ditentukan oleh tinggi elemen sel tabel di dalamnya. Dengan demikian, margin, padding, dan tinggi pada elemen-elemen tersebut tidak berpengaruh. Bagaimana cara mengatasi batasan ini?
hschmieder
3
Jika Anda memiliki beberapa item daftar baris, dan memerlukan spasi vertikal yang konsisten, solusinya adalah menambahkan spasi-perbatasan vertikal ke pemilih ol, misalnya spasi-perbatasan: 0 3px; Padding normal pada sel tabel tidak berfungsi karena angkanya selalu hanya satu baris.
RemBem
207

Saya percaya ini akan melakukan apa yang Anda cari.

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

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

masukkan deskripsi gambar di sini

JTOrlando
sumber
21
lebih baik jika Anda juga menambahkan padding-left: 1em;
Bence Gacsályi
16
Sejauh ini, inilah jawaban terbaik dari semua solusi di halaman ini. Ini jauh lebih nyaman daripada yang lain. Jika Anda ragu dengan jawaban mana yang harus dipilih, pilih yang ini.
Valentin Mercier
25
@loremmonkey Ini cepat dan kotor tetapi bukan solusi nyata. Pertama, 1emtidak sama dengan ruang indentasi. Garis tidak akan selaras dengan pixel-bijaksana. Kedua, bagaimana dengan ketika daftar mencapai angka 10? 100? Indentasi teks tidak akan berfungsi, itu tidak akan disejajarkan. Jawaban ini harus dipilih.
Sunny
1
@ Sunny Ini daftar disk bukan yang bernomor, jadi mengapa menghitung sampai 100? Saya tidak melihat masalah sama sekali dengan daftar saya menggunakan kode di atas.
lorem monyet
2
@loremmonkey indentasi tidak 1em. oi60.tinypic.com/a0eyvs.jpg Daftar-item pertama menggunakan teknik indentasi teks di atas. Dibandingkan dengan tampilannya yang biasanya dengan posisi-gaya-posisi: di luar tidak selaras, dimatikan oleh piksel dalam kasus ini.
Sunny
39

Cara termudah dan terbersih, tanpa peretasan, adalah dengan indentasi ul(atau ol), seperti:

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
}

Ini memberikan hasil yang sama dengan jawaban yang diterima: https://jsfiddle.net/5wxf2ayu/

Tangkapan layar:

masukkan deskripsi gambar di sini

Chuck Le Butt
sumber
1
Anda mungkin perlu menerapkan list-style-position: outsideuntuk <li>.
Alex
@Alex Anda hanya perlu melakukan ini jika Anda memaksa menimpa gaya yang sudah ada ( developer.mozilla.org/en/docs/Web/CSS/list-style-position ).
Chuck Le Butt
25

Periksa biola ini:

http://jsfiddle.net/K6bLp/

Ini menunjukkan bagaimana secara manual memasukkan dan menggunakan CSS.

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;
}

Saya juga mengedit biola Anda

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

Catat itu.

Deepan Babu
sumber
terima kasih, ini berfungsi baik untuk UL dan untuk OL entri hingga 9 daftar. Ini adalah masalah utama yang saya jelaskan dalam pertanyaan saya lebar hal 11/12. Dalam contoh saya di atas saya menjalankan teknik lain sehingga masalahnya terlihat berbeda tetapi inti masalahnya tetap sama: Ada perbedaan jika titik desimal saya memiliki satu atau dua angka atau lebih - misalnya 1., 11. atau 111.! Saya tidak melihat titik di mana saya dapat bereaksi melalui CSS dan menyesuaikan indentasi teks dan margin-kiri ke jumlah angka.
kernfrucht
Untuk indentasi baris kedua ol (lebih dari satu digit), saya pikir CSS tidak akan menyelesaikannya. Kami hanya harus pergi untuk jquery.
Deepan Babu
Perhatikan juga bahwa typeatribut untuk <ol>tampaknya sudah usang dalam HTML 5. Gunakan style="list-style-type: "sebagai gantinya.
AJ.
2
apakah 21 dari kalian orang yang serius? ini tidak bekerja. Tidak yakin apakah Anda mengubah kode sejak Anda memposting.
JGallardo
9

Anda dapat mengatur margin dan bantalan salah satu olatau uldalam CSS

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
Lukas2012
sumber
Sayangnya masalahnya tidak diselesaikan oleh solusi ini: baris kedua rata dengan daftar poin tidak lebar baris unggul, lihat contoh di atas
kernfrucht
11 dan 12 di jsfiddle.net/j7MEd/1 sejajar dengan paragraf atas dan bawah dan saya tidak mengubah kode. Apakah saya melewatkan sesuatu?
luke2012
tidak, bukan itu intinya. Masalah utama adalah bahwa baris kedua (dan ketiga, dll ...) dari setiap titik daftar tidak memiliki "indentasi" yang sama dengan baris pertama! (lihat contoh jsfiddle). Dalam pertanyaan saya di atas saya berpikir tentang solusi dengan padding, margin dll tetapi hanya berfungsi untuk daftar UNordered. Di daftar urutan masalah baru seperti hal 11/12 ini terjadi. Jadi pertanyaan utama saya adalah: Bagaimana saya bisa mendapatkan indent-hal (seperti saya hadir dalam contoh pertama dari pertanyaan saya) dilakukan untuk daftar dipesan tanpa masalah seperti hal 11/12.
kernfrucht
Ok maaf, ya! Ini adalah salah satu cara .. satu-satunya masalah adalah untuk mencapai cross-browser Anda perlu mengatur margin di IE dan padding di Firefox. jsfiddle.net/j7MEd/2
luke2012
7

Saya percaya Anda hanya perlu meletakkan daftar 'peluru' di luar padding.

li {
    list-style-position: outside;
    padding-left: 1em;
}
Diketahui Warna
sumber
6

Anda dapat menggunakan CSS untuk memilih rentang; dalam hal ini, Anda ingin daftar item 1-9:

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

Kemudian sesuaikan margin pada item pertama dengan tepat:

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; }

Lihat beraksi di sini: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

LaFaucon
sumber
5

CSS berikut melakukan trik:

ul{
    margin-left: 1em;
}

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

solusi saya cukup sama dengan Pumbaa80 , tapi saya sarankan untuk menggunakan display: tablebukan display:table-rowuntuk lielemen. Jadi akan menjadi seperti ini:

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;
}

Jadi sekarang kita dapat menggunakan margin untuk jarak antara li's

Alex
sumber
1

Saya sendiri cukup menyukai solusi ini:

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
sumber
hanya masalah ukuran font
atilkan
0

Daftar ol, ul akan berfungsi jika Anda mau, Anda juga dapat menggunakan tabel dengan perbatasan: tidak ada di css.

Casualbot
sumber
Saya pikir ini bukan solusi yang baik mengenai aturan semantik
kernfrucht
0

CSS hanya menyediakan dua nilai untuk "list-style-position" - di dalam dan di luar. Dengan "bagian dalam" baris kedua rata dengan poin daftar bukan dengan garis superior:

Dalam daftar yang diurutkan, tanpa intervensi, jika Anda memberikan "daftar-gaya-posisi" nilai "di dalam", baris kedua dari item daftar panjang tidak akan memiliki indentasi, tetapi akan kembali ke tepi kiri daftar (yaitu akan sejajar dengan jumlah item). Ini khusus untuk daftar yang dipesan dan tidak terjadi di daftar yang tidak berurutan.

Jika Anda memberikan "daftar-gaya-posisi" nilai "di luar", baris kedua akan memiliki indentasi yang sama dengan baris pertama.

Saya punya daftar dengan perbatasan dan punya masalah ini. Dengan "daftar-gaya-posisi" diatur ke "di dalam", daftar saya tidak seperti yang saya inginkan. Tetapi dengan "daftar-gaya-posisi" diatur ke "luar", jumlah item daftar berada di luar kotak.

Saya menyelesaikan ini dengan hanya menetapkan margin kiri yang lebih luas untuk seluruh daftar, yang mendorong seluruh daftar ke kanan, kembali ke posisi semula.

CSS:

ol.classname {margin: 0; padding: 0;}

ol.classname li {margin: 0.5em 0 0 0; padding-left: 0; list-style-position: outside;}

HTML:

<ol class="classname" style="margin:0 0 0 1.5em;">
Chris
sumber
-1

Ok, saya sudah kembali dan menemukan beberapa hal. Ini adalah SOLUSI KASAR untuk apa yang saya usulkan, tetapi tampaknya fungsional.

Pertama, saya membuat angka-angka sebagai serangkaian daftar tidak berurutan. Daftar yang tidak berurutan biasanya memiliki cakram di awal setiap item daftar (

  • ) jadi Anda harus mengatur CSS ke gaya daftar: tidak ada;

    Lalu, saya menampilkan seluruh daftar: table-row. Di sini, mengapa saya tidak hanya menempelkan Anda kode daripada mengobrol tentang hal itu?

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

    }

    Ini tampaknya menyelaraskan teks dalam div ke-2 dengan angka-angka dalam daftar yang diurutkan dalam div pertama. Saya telah mengelilingi daftar dan teks dengan tag sehingga saya bisa memberitahu semua div untuk ditampilkan sebagai inline-blok. Ini membuat mereka berbaris dengan baik.

    Margin ada untuk memberi jarak antara periode dan awal teks. Kalau tidak, mereka langsung berhadapan satu sama lain dan itu tampak seperti merusak pemandangan.

    Majikan saya ingin teks yang dibungkus (untuk entri bibliograh yang lebih panjang) untuk sejalan dengan awal baris pertama, bukan margin kiri. Awalnya saya gelisah dengan margin positif dan indentasi teks negatif, tetapi kemudian saya menyadari bahwa ketika saya beralih ke dua div yang berbeda, ini memiliki efek membuatnya sehingga semua teks berbaris karena margin kiri div adalah margin di mana teks secara alami dimulai. Jadi, yang saya butuhkan adalah margin 0,2em untuk menambah ruang, dan semua yang lainnya berbaris dengan rapi.

    Saya harap ini membantu jika OP memiliki masalah yang sama ... Saya kesulitan memahaminya.

    • David
    sumber
    -1

    Saya memiliki masalah yang sama dan mulai menggunakan jawaban user123444555621 . Namun, saya juga perlu menambahkan paddingdan borderke masing-masing li, yang solusi itu tidak memungkinkan karena masing li- masing adalah a table-row.

    Pertama, kami menggunakan a counteruntuk mereplikasi olangka.

    Kami kemudian mengatur display: table;masing li- masing dan display: table-cellpada :beforeuntuk memberi kami lekukan.

    Akhirnya, bagian yang sulit. Karena kita tidak menggunakan tata letak tabel untuk keseluruhan olkita perlu memastikan masing :before- masing memiliki lebar yang sama. Kita bisa menggunakan chunit ini untuk secara kasar menjaga lebar sama dengan jumlah karakter. Untuk menjaga agar lebarnya seragam ketika jumlah digit untuk angka :beforeberbeda, kita dapat menerapkan kueri kuantitas . Dengan asumsi Anda tahu daftar Anda tidak akan 100 item atau lebih, Anda hanya perlu satu aturan kueri kuantitas untuk memberitahu :beforeuntuk mengubah lebarnya, tetapi Anda dapat dengan mudah menambahkan lebih banyak.

    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>
    Luaskan cuplikan

    Jacob Alvarez
    sumber