Bagaimana cara mengatur spasi vertikal di antara item daftar?

115

Dalam sebuah <ul>elemen, jarak vertikal antar garis secara jelas dapat diformat dengan atribut line-height.

Pertanyaan saya adalah, dalam sebuah <ul>elemen, bagaimana cara mengatur jarak vertikal antara item daftar?

html css html-lists Brice Coustillas
sumber
1
ul li { margin: ???; padding: ???; line-height: ???; }semua atau sebagian dari atribut CSS tersebut.
Brad Christie

Jawaban:

112

Anda bisa menggunakan margin. Lihat contohnya:

http://jsfiddle.net/LthgY/

li{
  margin: 10px 0;
}

sumber
khususnya, gunakan margin pada lielemen, bukan ulelemen.
duanev
41

HTML

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS

li:not(:last-child) {
    margin-bottom: 5px;
}

EDIT: Jika Anda tidak menggunakan kasus khusus untuk elemen li terakhir, daftar Anda akan memiliki spasi kecil setelahnya yang dapat Anda lihat di sini: http://jsfiddle.net/wQYw7/

Sekarang bandingkan dengan solusi saya: http://jsfiddle.net/wQYw7/1/

Tentu ini tidak berfungsi di browser lama tetapi Anda dapat dengan mudah menggunakan ekstensi js yang akan mengaktifkan ini untuk browser lama.


sumber
1
@Layne bagian dari tugas kami sebagai pengembang web / pembuat kode adalah untuk menyediakan solusi yang akan bekerja di lingkungan sebanyak mungkin. Jawaban Anda benar-benar berlebihan untuk pertanyaan yang diajukan.
disin untuk
1
Saya kira tidak. Anda hanya memberikan solusi untuk lingkungan yang ingin Anda targetkan, yang lainnya akan berlebihan kecuali Anda berencana untuk mengembangkannya. Ditambah semua jawaban memiliki kelemahan menambahkan spasi sebelum dan / atau setelah elemen daftar pertama / terakhir. Yang bukan pertanyaannya, dia ingin hanya memiliki spasi ANTARA elemen daftar (setidaknya dia menulisnya). Elemen terakhir pada jawaban lain akan diberi spasi setelahnya meskipun tidak ada elemen li yang mengikuti.
Lingkungan tempat dia bekerja adalah browser web. Itu tidak berlebihan untuk menyarankan solusi yang berhasil di mana-mana. Plus, jika Anda benar-benar khawatir tentang margin item terakhir, Anda tidak akan menyarankan solusi yang perlu diperbaiki js. Anda dapat menggunakan :first-childdan itu akan bekerja di semua IE7 +
disinfor
4
@disinfor Saya tidak setuju tentang menargetkan segalanya. Sebagian dari tekanan pengembangan web berasal dari browser pendukung yang tidak mendukung kami. Safari adalah salah satunya. Kita perlu melawan browser yang menahan internet, medium.com/@richtr/… . Halaman web kami harus menampilkan kembali pemberitahuan "Kami tidak mendukung browser Anda" agar tidak berfungsi di mana-mana. Dan kami juga perlu menginformasikan dan membela klien. Atau kita tidak bisa melakukan apa-apa dan menjadi alas lantai yang mengagumkan.
1,21 gigawatt
@ 1.21gigawatts "Halaman web kami harus menampilkan kembali" Kami tidak mendukung browser Anda "" mhm, tidak. Itu disebut sabotase persaingan, dan ilegal di banyak negara. Microsoft melakukannya dengan Skype untuk Web. Skype untuk Web masih berfungsi dengan sempurna di browser lain. Google membuat Youtube rusak di Safari selama lebih dari setahun. Google memblokir pengguna Tor untuk menggunakan layanan tertentu. Bukankah tujuan dari "platform web" untuk membuat aplikasi dan layanan platform-independen, seperti tidak memblokir platform tertentu? Jika Anda ingin melakukan itu, mengapa tidak membuat program asli saja? Pada akhirnya, mereka lebih kuat.
Andreas
35

Saya akan cenderung untuk ini yang memiliki keunggulan dukungan IE8.

li{
    margin-top: 10px;
    border:1px solid grey;
}

li:first-child {
    margin-top:0;
}

JSFiddle

Paulie_D
sumber
27

Tambahkan a marginke litag Anda . Itu akan menciptakan ruang antara lidan Anda dapat menggunakan line-heightuntuk mengatur jarak ke teks di dalam litag.

disinfor
sumber
3

Sering kali saat membuat ledakan email HTML Anda tidak dapat menggunakan lembar gaya atau blok gaya / gaya. Semua CSS harus sebaris. Dalam kasus di mana Anda ingin menyesuaikan jarak antara peluru saya menggunakan li style = "margin-bottom: 8px;" di setiap butir poin. Sesuaikan nilai piksel sesuai keinginan Anda.

Batu Malcolm
sumber
Selain itu, tag jenis gaya / gaya sudah tidak digunakan lagi
Ben Slade
2

Untuk menerapkan ke seluruh daftar, gunakan

ul.space_list li { margin-bottom: 1em; }

Kemudian, di html:

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>
Tom Bartenstein
sumber
0

pengaturan padding-bottom untuk setiap daftar menggunakan pseudo class adalah metode yang layak. Juga tinggi garis bisa digunakan. Ingatlah bahwa properti font seperti font-family, Font-weight, dll. Memainkan peran untuk ketinggian yang tidak rata.

Rishi jung
sumber
2
Dapatkah Anda memberikan contoh solusi Anda?
Muldec
-9

<br><li></li>entri antara baris tampaknya berfungsi dengan baik di semua browser web yang saya coba, tetapi gagal melewati pemeriksa W3C CSS3 on-line. Ini memberi saya jarak baris yang saya cari. Sejauh yang saya ketahui, karena tidak diragukan lagi berfungsi, saya tetap menggunakannya, apa pun yang dikatakan W3C, sampai seseorang dapat menemukan alternatif hukum yang baik.

Melvyn Owen
sumber
Saran Anda berfungsi dengan baik jika Anda senang dengan ketinggian garis saat ini, tetapi saya pikir dia ingin menentukan jumlah ruangnya sendiri. Menggunakan jeda baris, buat saja baris baru menggunakan tinggi baris saat ini.
1,21 gigawatt
Jika Anda mengulang pada daftar dengan banyak item, menambahkan br adalah praktik yang buruk. Markup adalah cara paling aman dan cepat untuk menambahkan spasi seperti yang disarankan oleh jawaban di atas.
SeaWarrior404