CSS: Kontrol ruang antara peluru dan <li>


177

Saya ingin mengontrol berapa banyak ruang horizontal yang didorong peluru <li>ke kanan dalam <ol>atau <ul>.

Artinya, alih-alih selalu memiliki

*  Some list text goes
   here.

Saya ingin bisa mengubahnya menjadi

*         Some list text goes
          here.

atau

*Some list text goes
 here.

Saya melihat sekeliling tetapi hanya bisa menemukan instruksi untuk menggeser seluruh blok ke kiri atau ke kanan, misalnya, http://www.alistapart.com/articles/taminglists/


3
Hampir merupakan duplikat dari stackoverflow.com/questions/2441059/…
rds

Jawaban:


161

Tempatkan isinya di posisi spanyang relatif, maka Anda dapat mengontrol ruang dengan leftproperti span.

li span {
  position: relative;
  left: -10px;
}
<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
</ul>


Hanya untuk memperjelas, tag <span> dapat berupa semantik ketika diberikan sebuah kelas, misalnya <span class = "tel"> 123-456-7890 </span> secara implisit adalah semantik.
ingyhere

4
+1 untuk benar-benar menjawab pertanyaan orang itu;) (meskipun rentang idealnya dalam kehidupan nyata harus memiliki kelas untuk praktik yang baik futureproofing serta semantik: jika di masa depan javascript atau pengembangan fitur baru dll. Memiliki alasan yang baik untuk menambahkan bentang ekstra ke konten Anda, semuanya bisa berantakan)
user56reinstatemonica8

di firefox tidak ada tampilan yang benar teks tumpang tindih peluru menggunakan trik ini
Jay Bhalodi

@ di mana saya ragu ini benar, karena saya tidak dapat menemukan apa pun yang membuktikan klaim ini. Bisakah Anda memberikan sumber?
WoIIe

@Wolle Hmmm. Ini adalah komentar lama, dan saya tidak yakin dengan keprihatinannya - Jika itu <SPAN>dapat digunakan idatau classdiberi tag, lihat W3C . Jika pertanyaannya adalah apakah dapat menyampaikan makna semantik, lihat jawaban ini . Secara teknis, <SPAN>tag adalah elemen inline non-semantik dengan sendirinya, tetapi dalam beberapa hal memberi lebih banyak fleksibilitas dalam penggunaannya kembali. Saat ini, saya percaya seseorang dapat menggunakan inline-blockdeskriptor untuk memungkinkan banyak opsi pemformatan.
ingyhere

120

Untuk meringkas jawaban lain di sini - jika Anda ingin kontrol yang lebih baik atas ruang antara peluru dan teks dalam <li>item daftar, opsi Anda adalah:

(1) Gunakan gambar latar belakang:

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

Keuntungan:

  • Anda dapat menggunakan gambar apa pun yang Anda inginkan untuk peluru
  • Anda dapat menggunakan CSS background-positionuntuk memposisikan gambar cukup banyak di mana saja yang Anda inginkan dalam kaitannya dengan teks, menggunakan piksel, ems atau%

Kekurangan:

  • Menambahkan file gambar ekstra (walaupun kecil) ke halaman Anda, menambah berat halaman
  • Jika pengguna meningkatkan ukuran teks pada browser mereka, peluru akan tetap pada ukuran aslinya. Kemungkinan juga akan semakin keluar dari posisinya saat ukuran teks bertambah
  • Jika Anda mengembangkan tata letak 'responsif' hanya menggunakan persentase untuk lebar, mungkin sulit untuk mendapatkan peluru tepat di tempat yang Anda inginkan di atas rentang lebar layar

2. Gunakan padding pada <li>tag

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

Keuntungan:

  • Tidak ada gambar = 1 lebih sedikit file untuk diunduh
  • Dengan menyesuaikan padding pada <li>, Anda dapat menambahkan ruang horizontal ekstra antara peluru dan teks yang Anda inginkan
  • Jika pengguna meningkatkan ukuran teks, jarak dan ukuran peluru harus skala secara proporsional

Kekurangan:

  • Tidak dapat memindahkan peluru lebih dekat ke teks daripada default browser
  • Terbatas untuk bentuk dan ukuran jenis peluru bawaan CSS
  • Bullet harus berwarna sama dengan teks
  • Tidak ada kontrol atas posisi vertikal peluru

(3) Bungkus teks dalam <span>elemen tambahan

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

Keuntungan:

  • Tidak ada gambar = 1 lebih sedikit file untuk diunduh
  • Anda mendapatkan kontrol lebih besar atas posisi peluru daripada dengan opsi (2) - Anda dapat memindahkannya lebih dekat ke teks (meskipun meskipun upaya terbaik saya tampaknya Anda tidak dapat mengubah posisi vertikal dengan menambahkan padding-topke <span>. Orang lain mungkin memiliki solusi untuk ini, meskipun ...)
  • Peluru bisa menjadi warna yang berbeda dengan teks
  • Jika pengguna meningkatkan ukuran teks mereka, peluru harus skala dalam proporsi (asalkan Anda mengatur padding & margin dalam ems bukan px)

Kekurangan:

  • Membutuhkan elemen ekstra tidak romantis (ini mungkin akan kehilangan Anda lebih banyak teman di SO daripada di kehidupan nyata;) tetapi itu menjengkelkan bagi mereka yang suka kode mereka menjadi ramping dan seefisien mungkin, dan itu melanggar pemisahan presentasi dan konten yang seharusnya ditawarkan oleh HTML / CSS)
  • Tidak ada kontrol atas ukuran dan bentuk peluru

Berikut ini berharap beberapa fitur gaya daftar baru di CSS4, sehingga kami dapat membuat peluru yang lebih cerdas tanpa menggunakan gambar atau marka tambahan :)


4
Jawaban yang bagus Agar # 2 berfungsi, pastikan Anda mempertahankan posisi-gaya-posisi Anda outside.
Tom Auger

Elemen span adalah perbaikan untuk saya. Saya memberi jawaban ini hanya karena saya lebih suka margin negatif daripada posisi absolut negatif - tanpa alasan yang jelas.
FlipMcF

Jika Anda memiliki teks yang membungkus baris, saya menemukan bahwa saya harus menambahkan display: block;elemen span agar teks yang dibungkus juga akan berbaris (saya juga akhirnya menggunakan tag jangkar alih-alih bentang)
Kevin M

Menggunakan gambar latar belakang untuk apa pun yang tidak hanya hampir selalu merupakan ide yang sangat buruk. Mereka tidak dapat disimpan, tidak dicetak dan tidak disebutkan oleh pembaca layar. Menggunakan <span> ist cara paling elegan untuk menyelesaikan ini. paddings tidak akan berfungsi karena mereka juga mengubah posisi peluru.
Bachsau

3
Saya tidak akan pernah menggunakan gambar latar belakang untuk ini. Anda selalu dapat menggunakan: sebelum elemen dengan konten: "•"; kemudian, Anda menggunakan padding dan posisi absolut pada elemen sebelum itu untuk mengontrolnya.
Yann Chabot

37

Ini harus dilakukan. Pastikan untuk mengatur peluru Anda ke luar. Anda juga dapat menggunakan elemen pseudo CSS jika Anda dapat menjatuhkannya di IE7 ke bawah. Saya tidak benar-benar merekomendasikan menggunakan elemen pseudo untuk hal ini tapi itu berfungsi untuk mengontrol jarak.

ul {
  list-style: circle outside;
  width: 100px;
}

li {
  padding-left: 40px;
}

.pseudo,
.pseudo ul {
  list-style: none;
}

.pseudo li {
  position: relative;
}

/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
  content: '\2192';
  position: absolute;
  left: 0;
}
<ul>
  <li>Any Browser really</li>
  <li>List item
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

<ul class="pseudo">
  <li>IE8+ only</li>
  <li>List item
    <ul>
      <li>List item with two lines of text for the example.</li>
      <li>List item</li>
    </ul>
  </li>
</ul>


5
Saya tidak percaya jawaban ini tidak diterima. Ini 100% CSS, tidak menambahkan elemen <span> berlebihan, dan itu membuat saya akhirnya mengerti mengapa ada opsi di dalam / luar! (dan itu adalah jawaban yang diterima dari pertanyaan rangkap yang disebutkan ...)
MindTailor

1
Menggunakan list-style-position: outsidedan melapisi LIelemen memungkinkan Anda meningkatkan jarak antara titik-titik peluru tetapi tetap tidak bekerja sebaliknya di luar offset yang ditentukan browser. Lihat Bin JS ini .
Mesagoma

4
Tambahan: Di peramban modern (IE9 +, FF, Chrome, dll.), Gunakan negatif text-indentpada <UL>atau <LI>untuk meniadakan jarak tempuh peramban antara titik peluru dan <LI>konten. Artinya, tambah padding-leftseperti yang ditunjukkan di atas untuk menambah jarak dan mengurangi text-indentuntuk mengurangi jarak antara titik peluru dan konten yang diinginkan.
Mesagoma

1
Sayangnya , untuk semua browser desktop yang disebutkan di atas, jika isi <LI>wraps menjadi baris kedua, baris berikutnya berakhir dengan indentasi ulang berdasarkan margin / padding / indent yang berhasil kami batalkan untuk baris pertama via text-indent. Sigh
Mesagoma

Pilihan lain adalah menggunakan: sebelum elemen pseudo dan mengatur konten untuk apa pun yang Anda suka. dari sana posisikan elemen semu yang diinginkan.
Kevin

14

Pertanyaan lama, tetapi: sebelum elemen pseudo berfungsi dengan baik di sini.

<style>
    li:before {
        content: "";
        display: inline-block;
        height: 1rem;  // or px or em or whatever
        width: .5rem;  // or whatever space you want
    }
</style>

Ini berfungsi dengan sangat baik dan tidak memerlukan banyak aturan atau html tambahan.

<ul>
    <li>Some content</li>
    <li>Some other content</li>
</ul>

Bersulang!


3
Jawaban yang bagus & sederhana. Saya akan menambahkan bahwa pengaturan margin-left: -5px(atau nilai apa pun) akan mengurangi ruang antara peluru dan <li>elemen
binaryfunt

2
Catatan: Ini tidak mendukung indentasi gantung
Eric

Jawaban yang luar biasa, ini bekerja dengan sempurna dengan jumlah pekerjaan paling minimal! Terima kasih!
KyleFarris

12

Untuk tipe-tipe-daftar: sebaris :

Ini hampir sama dengan jawaban DSMann8 tetapi kode css kurang.

Anda hanya perlu melakukannya

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

<ul>
    <li>Some content</li>
</ul>

Bersulang


Ini juga berfungsi list-style-position: inside, itu hebat!
Matt Dodge

11

Anda dapat menggunakan padding-leftatribut pada item daftar ( bukan pada daftar itu sendiri!).


5
Harap dicatat ini hanya berfungsi jika list-style-positiondiatur ke default outside.
Agustus

Ini harus menjadi jawaban yang diterima, setidaknya untuk penggunaan normal. Ini menghindari penggunaan <span>elemen hanya untuk tujuan desain.
eukras

7

Menggunakan indentasi teks pada li berfungsi paling baik.

indentasi teks: -x px; akan memindahkan peluru lebih dekat ke li dan sebaliknya.

Menggunakan relatif pada rentang kiri negatif mungkin tidak berfungsi dengan baik dengan versi yang lebih lama untuk IE. PS - hindari memberikan posisi sebanyak yang Anda bisa.


Ini berperilaku aneh di Chrome. Terkunci ke ruang kecil di -5px;
Ian Warburton

7

Berikut ini solusi lain menggunakan elemen css counter dan pseudo. Saya merasa lebih elegan karena tidak memerlukan penggunaan markup html tambahan atau kelas css:

ol,
ul {
    list-style-position: inside;
}

li {
    list-style-type: none;
}

ol {
    counter-reset: ol; //reset the counter for every new ol
}

ul li:before {
        content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
}

ol li:before {
        counter-increment: ol;
        content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
}

Saya menggunakan spasi yang tidak dapat dipecahkan sehingga jarak hanya mempengaruhi baris pertama elemen daftar saya (jika elemen daftar lebih dari satu baris panjang). Anda bisa menggunakan bantalan di sini sebagai gantinya.


7

Pertanyaan lama tetapi masih relevan. Saya sarankan menggunakan negatif text-indent. list-style-positionharus outside.

Pro:

  • Peluru diposisikan dengan benar secara otomatis
  • Ubah ukuran font tidak merusak posisi bullet
  • Tidak ada elemen tambahan (tidak ada: elemen pseudo juga)
  • Bekerja untuk RTL dan LTR tanpa perubahan dalam CSS.

Cons:

  • mencoba
  • untuk
  • Temukan
  • satu :)

2
Saya mencoba menggunakan metode ini tetapi indentasi tidak berfungsi untuk saya jika ada jeda baris. Indentasi teks hanya akan membuat indentasi baris pertama.
Matt

6

Daftar yang tidak terurut dimulai dengan tag ul. Setiap item daftar dimulai dengan Item daftar akan ditandai dengan peluru (lingkaran hitam kecil) secara default:

    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>

Keluaran:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

Properti indentasi teks menentukan indentasi dari baris pertama dalam blok teks.
Catatan: Nilai negatif diizinkan. Baris pertama akan menjorok ke kiri jika nilainya negatif.

<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Terima kasih atas jawabannya, silakan coba menjelaskan solusi Anda, untuk memudahkan pemahaman orang lain.
dominasi

ini adalah jawaban terbaik dan harus diterima. CSS minimum!
KawaiKx

5

Tampaknya Anda dapat (agak) mengontrol spasi menggunakan bantalan pada tag <li>.

<style type="text/css">
    li { padding-left: 10px; }
</style>

Tangkapannya adalah sepertinya tidak memungkinkan Anda untuk mengikisnya dengan cara yang pas seperti contoh terakhir Anda.

Untuk itu Anda bisa mencoba mematikan tipe-daftar-gaya dan menggunakan & bull;

<ul style="list-style-type: none;">
    <li>&bull;Some list text goes here.</li>
</ul>

5

Tampaknya ada solusi yang jauh lebih bersih jika Anda hanya ingin mengurangi jarak antara poin-poin dan teks:

li:before {
    content: "";
    margin-left: -0.5rem;
}

4

Anda juga dapat menggunakan pengganti gambar latar belakang sebagai alternatif, memberi Anda kendali penuh atas posisi vertikal dan horizontal.

Lihat jawaban untuk Pertanyaan ini



0

Anda dapat menggunakan ul li:beforedan gambar latar belakang, dan menetapkan position: relativedan position:absoluteke lidan li:beforemasing-masing. Dengan cara ini Anda dapat membuat gambar dan memposisikannya di mana pun yang Anda inginkan relatif terhadap li.


0

Gunakan padding-left:1em; text-indent:-1emuntuk <li>tag.
Lalu, list-style-position: insideuntuk <ul>tag.

<ul style='list-style-position: inside;'>
  <li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>

0

Solusi berikut ini berfungsi dengan baik ketika Anda ingin memindahkan teks lebih dekat ke bullet dan bahkan jika Anda memiliki beberapa baris teks.

margin-right memungkinkan Anda untuk memindahkan teks lebih dekat ke bullet

text-indent memastikan bahwa beberapa baris teks masih berbaris dengan benar

li:before {
  content: "";
  margin-right: -5px; /* Adjust this to move text closer to the bullet */
}

li {
  text-indent: 5px; /* Aligns second line of text */
}
<ul>
  <li> Item 1 ... </li>
  <li> Item 2 ... this item has tons and tons of text that causes a second line! Notice how even the second line is lined up with the first!</li>
  <li> Item 3 ... </li>
</ul>

masukkan deskripsi gambar di sini


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.