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/
html
css
html-lists
erjiang
sumber
sumber
Jawaban:
Tempatkan isinya di posisi
span
yang relatif, maka Anda dapat mengontrol ruang denganleft
propertispan
.sumber
<SPAN>
dapat digunakanid
atauclass
diberi 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 menggunakaninline-block
deskriptor untuk memungkinkan banyak opsi pemformatan.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:
Keuntungan:
background-position
untuk memposisikan gambar cukup banyak di mana saja yang Anda inginkan dalam kaitannya dengan teks, menggunakan piksel, ems atau%Kekurangan:
2. Gunakan padding pada
<li>
tagKeuntungan:
<li>
, Anda dapat menambahkan ruang horizontal ekstra antara peluru dan teks yang Anda inginkanKekurangan:
(3) Bungkus teks dalam
<span>
elemen tambahanKeuntungan:
padding-top
ke<span>
. Orang lain mungkin memiliki solusi untuk ini, meskipun ...)Kekurangan:
Berikut ini berharap beberapa fitur gaya daftar baru di CSS4, sehingga kami dapat membuat peluru yang lebih cerdas tanpa menggunakan gambar atau marka tambahan :)
sumber
outside
.display: block;
elemen span agar teks yang dibungkus juga akan berbaris (saya juga akhirnya menggunakan tag jangkar alih-alih bentang)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.
sumber
list-style-position: outside
dan melapisiLI
elemen memungkinkan Anda meningkatkan jarak antara titik-titik peluru tetapi tetap tidak bekerja sebaliknya di luar offset yang ditentukan browser. Lihat Bin JS ini .text-indent
pada<UL>
atau<LI>
untuk meniadakan jarak tempuh peramban antara titik peluru dan<LI>
konten. Artinya, tambahpadding-left
seperti yang ditunjukkan di atas untuk menambah jarak dan mengurangitext-indent
untuk mengurangi jarak antara titik peluru dan konten yang diinginkan.<LI>
wraps menjadi baris kedua, baris berikutnya berakhir dengan indentasi ulang berdasarkan margin / padding / indent yang berhasil kami batalkan untuk baris pertama viatext-indent
. SighPertanyaan lama, tetapi: sebelum elemen pseudo berfungsi dengan baik di sini.
Ini berfungsi dengan sangat baik dan tidak memerlukan banyak aturan atau html tambahan.
Bersulang!
sumber
margin-left: -5px
(atau nilai apa pun) akan mengurangi ruang antara peluru dan<li>
elemenUntuk tipe-tipe-daftar: sebaris :
Ini hampir sama dengan jawaban DSMann8 tetapi kode css kurang.
Anda hanya perlu melakukannya
Bersulang
sumber
list-style-position: inside
, itu hebat!Anda dapat menggunakan
padding-left
atribut pada item daftar ( bukan pada daftar itu sendiri!).sumber
list-style-position
diatur ke defaultoutside
.<span>
elemen hanya untuk tujuan desain.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.
sumber
Berikut ini solusi lain menggunakan elemen css counter dan pseudo. Saya merasa lebih elegan karena tidak memerlukan penggunaan markup html tambahan atau kelas css:
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.
sumber
Pertanyaan lama tetapi masih relevan. Saya sarankan menggunakan negatif
text-indent
.list-style-position
harusoutside
.Pro:
Cons:
sumber
Daftar yang tidak terurut dimulai dengan tag ul. Setiap item daftar dimulai dengan Item daftar akan ditandai dengan peluru (lingkaran hitam kecil) secara default:
Keluaran:
Properti indentasi teks menentukan indentasi dari baris pertama dalam blok teks.
Catatan: Nilai negatif diizinkan. Baris pertama akan menjorok ke kiri jika nilainya negatif.
sumber
Tampaknya Anda dapat (agak) mengontrol spasi menggunakan bantalan pada tag <li>.
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;
sumber
Tampaknya ada solusi yang jauh lebih bersih jika Anda hanya ingin mengurangi jarak antara poin-poin dan teks:
sumber
Anda juga dapat menggunakan pengganti gambar latar belakang sebagai alternatif, memberi Anda kendali penuh atas posisi vertikal dan horizontal.
Lihat jawaban untuk Pertanyaan ini
sumber
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
sumber
Anda dapat menggunakan
ul li:before
dan gambar latar belakang, dan menetapkanposition: relative
danposition:absolute
keli
danli:before
masing-masing. Dengan cara ini Anda dapat membuat gambar dan memposisikannya di mana pun yang Anda inginkan relatif terhadap li.sumber
Gunakan
padding-left:1em; text-indent:-1em
untuk<li>
tag.Lalu,
list-style-position: inside
untuk<ul>
tag.sumber
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 bullettext-indent
memastikan bahwa beberapa baris teks masih berbaris dengan benarsumber
gunakan
<span style="display: flex;">
di dalam masing-masing<li>
.sumber