Simbol poin kustom untuk <li> elemen di <ul> yang merupakan karakter biasa, dan bukan gambar


125

Saya menyadari seseorang dapat menentukan grafik khusus untuk menjadi karakter peluru pengganti, menggunakan atribut CSS:

list-style-image

Dan kemudian memberikannya URL.

Namun, dalam kasus saya, saya hanya ingin menggunakan simbol '+'. Saya tidak ingin harus membuat grafik untuk itu dan kemudian menunjukkannya. Saya lebih suka menginstruksikan daftar tidak berurutan untuk menggunakan simbol plus sebagai simbol peluru.

Bisakah ini dilakukan atau saya terpaksa membuatnya menjadi grafik terlebih dahulu?

Jawaban:


81

Berikut ini dikutip dari Daftar Penjinakan :

Mungkin ada kalanya Anda memiliki daftar, tetapi Anda tidak menginginkan poin apa pun, atau Anda ingin menggunakan karakter lain sebagai pengganti poin. Sekali lagi, CSS memberikan solusi langsung. Cukup tambahkan gaya daftar: tidak ada; ke aturan Anda dan paksa LI untuk ditampilkan dengan indentasi gantung. Aturannya akan terlihat seperti ini:

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

Baik padding atau margin perlu disetel ke nol, dengan yang lainnya disetel ke 1em. Bergantung pada "poin" yang Anda pilih, Anda mungkin perlu mengubah nilai ini. Teks-indentasi negatif menyebabkan baris pertama dipindahkan ke kiri sebesar itu, menciptakan indentasi gantung.

HTML akan berisi UL standar kami, tetapi dengan karakter atau entitas HTML apa pun yang ingin Anda gunakan sebagai pengganti poin sebelum konten item daftar. Dalam kasus kami, kami akan menggunakan », kutipan sudut ganda kanan:».

»Item 1
» Item 2
»Item 3
» Item 4
»Item 5 kami akan membuat
   sedikit lebih lama sehingga
   akan membungkus


1
Solusi Anda berfungsi, dalam kombinasi dengan: before-pseudo-selector yang Anda dan @Tieson T. tunjuk. Saya suka Anda menyebutkan bagaimana berbagai atribut di <UL> bekerja bersama-sama untuk meniru lekukan peluru.
idStar

9
Beginilah cara saya menggabungkannya, yang berhasil: ul {font-size: 14px; tinggi baris: 16px; list-style: tidak ada; margin kiri: 0; padding-kiri: 1em; teks-indentasi: -1em; } li: sebelum {content: "+"; } Saya memang harus memberi spasi setelah simbol +, tetapi tampilannya cukup selaras.
idStar

6
Sayangnya dengan metode ini tanda peluru disertakan dalam pilihan yang tidak berlaku untuk peluru normal.
Konrad Höffner

169

Ini adalah jawaban yang terlambat, tetapi saya baru saja menemukan ini ... Untuk mendapatkan indentasi yang benar pada setiap baris yang membungkus, coba cara ini:

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}

1
Bagi saya, lebih baik menggunakan ch sebagai unit pengukuran, khususnya text-indent: -2chuntuk menghitung tanda + dan spasi setelahnya, lalu padding-right: 1chmenambahkan spasi itu. Tetap saja, +1 yang besar.
cobaltduck

44

Begitu banyak solusi.
Tapi saya masih berpikir masih ada ruang untuk perbaikan.

Keuntungan:

  • kode yang sangat kompak
  • berfungsi dengan ukuran font apa pun
    (tidak ada nilai piksel absolut yang terkandung)
  • meratakan baris dengan sempurna
    (tidak ada sedikit pergeseran antara baris pertama dan baris berikutnya)

ul {
	position: relative;
	list-style: none;
	margin-left: 0;
	padding-left: 1.2em;
}
ul li:before {
	content: "+";
	position: absolute;
	left: 0;
}
<ul>
  <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
  <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>


2
ini adalah yang terbaik
user3168511

1
Ini adalah jawaban yang lebih baik menurut saya karena ini menunjukkan bagaimana Anda dapat menyesuaikan detail lainnya juga. Dan itu juga memiliki "Jalankan cuplikan kode" terpasang!
Ionuț Ciuta

1
Ini harus menjadi jawabannya. Bersih dan sederhana
EvilDr

1
Saya sedang mencari solusi menggunakan gambar dan mencoba banyak jawaban, tetapi yang ini paling berhasil untuk saya! Saya dapat menggunakan content: url('link-to-my-asset.svg');dan mengatur lebar dan bantalan gambar antara peluru dan konten. Terima kasih!
AnnieP

Ini jawaban yang bagus. Namun, saya membutuhkan solusi yang dapat mendukung penghitungan kolom juga
Kushagr Arora

29

Ini adalah solusi W3C. Berfungsi di Firefox dan Chrome.

ul { list-style-type: "🔔"; }
/* Sets the marker to a 🔔 emoji character */

http://dev.w3.org/csswg/css-lists/#marker-content

ul { list-style-type: "🔔 "; }
  <ul><li>item</li></ul>


2
Meskipun tampaknya berfungsi di versi Firefox saat ini, hasilnya sangat buruk: peluru khusus ditempatkan tepat di depan konten teks (melekat padanya), hampir seperti li:before {content:"…";}digunakan tanpa lekukan dan perataan lain.
Anton Samsonov

19

Inilah solusi terbaik yang saya temukan sejauh ini. Ini berfungsi dengan baik dan lintas-browser (IE 8+).

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

Yang penting adalah memiliki karakter dalam blok mengambang dengan lebar tetap sehingga teks tetap sejajar jika terlalu panjang untuk muat dalam satu baris. 1.2em adalah lebar yang Anda inginkan untuk karakter Anda, ubah sesuai kebutuhan Anda.


Ini adalah solusi terbaik yang saya temukan.
Charles Roper

ab-penggunaan floatlagi? ... naah.


10

Solusi saya menggunakan pemosisian untuk mendapatkan garis yang dibungkus secara otomatis berbaris dengan benar. Jadi Anda tidak perlu khawatir tentang pengaturan padding-tepat pada li: sebelumnya.

ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

ul li {
  position: relative;
  margin-left: 1em;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "+";
}
<ul>
  <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>


8

Sebaiknya penataan gaya agar memenuhi syarat <li>agar tidak memengaruhi <ol>item daftar. Begitu:

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul li {
    padding-left: 1em;
    text-indent: -1em;
}

ul li:before {
    content: "+";
    padding-right: 5px;
}

8

Font-awesome memberikan solusi hebat di luar kotak:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul class='fa-ul'>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>


4

.list-dash li, .list-bullet li {
    position: relative;
    list-style-type: none; /* disc circle(hollow) square none */
    text-indent: -2em;
}
.list-dash li:before {
    content: '—  '; /* em dash */
}
.list-bullet li:before {
    content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */
}
<ul class="list-dash">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>


Up memilih ini hanya karena / * salin dan tempel poin dari HTML di browser ke css (tidak menggunakan kode ascii) * /
kheya

2

Gaya tanda pisah:

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}

1

Saya lebih suka menggunakan margin negatif, memberi Anda lebih banyak kendali

ul {
  margin-left: 0;
  padding-left: 20px;
  list-style: none;
}

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}

1

Yang cukup menarik, saya tidak menganggap salah satu solusi yang diposting cukup baik, karena mereka bergantung pada fakta bahwa karakter yang digunakan lebar 1em, yang tidak perlu begitu (dengan pengecualian jawaban John Magnolia yang bagaimanapun menggunakan pelampung yang dapat mempersulit hal-hal dengan cara lain). Inilah usaha saya:

ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 30px; /* change 30px to anything */
  text-indent: -30px;
}
ul li:before {
  content: "xy";
  display: inline-block; 
  width: 30px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Ini memiliki keunggulan berikut (dibandingkan solusi lain):

  1. Itu tidak bergantung pada lebar simbol seperti yang Anda lihat di contoh. Saya menggunakan dua karakter untuk menunjukkan bahwa itu berfungsi bahkan dengan peluru lebar. Jika Anda mencoba ini di solusi lain, Anda mendapatkan teks yang tidak sejajar (bahkan terlihat dengan simbol * dalam zoom yang lebih tinggi).
  2. Ini memberi Anda kendali penuh atas ruang yang digunakan oleh peluru . Anda dapat mengganti 30px dengan apapun (bahkan 1em dll). Hanya saja, jangan lupa untuk mengubahnya di ketiga tempat tersebut.
  3. Jika memberi Anda kendali penuh atas posisi peluru . Cukup ganti text-align: center;dengan apa pun yang Anda sukai. Misalnya Anda dapat mencoba color: red; text-align: right; padding-right: 5px; box-sizing: border-box; atau jika Anda tidak suka bermain dengan border-box, kurangi padding (5px) dari width (misal: width: 25px dalam contoh ini). Ada banyak pilihan.
  4. Tidak menggunakan pelampung sehingga bisa ditampung dimana saja.

Nikmati.


1

.single-before {
  list-style: "👍";
  list-style-position: outside!important;
}
<ul class="single-before">
  <li> is to manifest perfection already in man.</li>
  <li> is to bring out the best facets of our students personalities.</li>
</ul>


Terima kasih - Ini sangat bersih dan saya lupa tentang !important, yang sangat penting untuk membuat CSS khusus saya di Blogspot berfungsi
velkoon

-2

coba ini

    ul.a {
        list-style-type: circle;
    }
    
    ul.b {
        list-style-type: square;
    }
    
    ol.c {
        list-style-type: upper-roman;
    }
    
    ol.d {
        list-style-type: lower-alpha;
    }
    
<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    </body>
    </html>

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.