CSS: Kontrol ruang antara peluru dan <li>

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/

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>

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 :)

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>

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!

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

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

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.

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.

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 :)

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>

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>

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

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

Lihat jawaban untuk Pertanyaan ini

ul
{
list-style-position:inside;
} 

Definisi dan Penggunaan

Properti daftar-gaya-posisi menentukan apakah penanda daftar-item akan muncul di dalam atau di luar aliran konten.

Sumber: http://www.w3schools.com/cssref/pr_list-style-position.asp

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.

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>

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>

gunakan <span style="display: flex;">di dalam masing-masing <li>.