Tanda hubung jenis daftar HTML

222

Apakah ada cara untuk membuat daftar-gaya dalam HTML dengan tanda hubung (yaitu - atau - –atau - —) yaitu

<ul>
  <li>abc</li>
</ul>

Keluaran:

- abc

Terpikir oleh saya untuk melakukan ini dengan sesuatu seperti li:before { content: "-" };, meskipun saya tidak tahu kontra dari opsi itu (dan akan sangat berkewajiban untuk umpan balik).

Secara lebih umum, saya tidak keberatan mengetahui bagaimana menggunakan karakter umum untuk item daftar.

html css xhtml html-lists Brian M. Hunt
sumber

79

karena dash biasanya digunakan dalam daftar mengapa tidak disertakan secara default di css?

temirbek

101

yang lebih penting, mengapa ada penomoran armenian dan katakana ... tetapi tidak putus-putus?

Henry C

108

Anda dapat menggunakan :beforedan content:mengingat bahwa ini tidak didukung di IE 7 atau di bawah. Jika Anda setuju dengan itu maka ini adalah solusi terbaik Anda. Lihat Can I Use atau QuirksMode tabel kompatibilitas CSS untuk detail lengkap.

Solusi yang agak nastier yang bisa digunakan di browser lama adalah dengan menggunakan gambar untuk poin-poin dan hanya membuat gambar terlihat seperti tanda hubung. Lihat halaman W3Clist-style-image untuk contohnya.

Darko Z
sumber

27

Masalahnya :beforeadalah ketika item daftar membentang beberapa baris, indentasi pada baris ke-2 dimulai di mana tanda hubung, sehingga merusak efek daftar indentasi. Anda perlu menggunakan indentasi gantung untuk menghindari ini. Lihat ini: alistapart.com/articles/taminglists

chiborg

3

Untuk menempatkan mdash contentdigunakancontent: "\2014\a0"

Ivan Z

Lihat jawaban @tiga, yang lebih umum dan lebih sedikit bertele-tele!

Ben Vertonghen

221

Ada perbaikan mudah (teks-indent) untuk menjaga efek daftar indentasi dengan :beforekelas pseudo.

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}

Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text

Luaskan cuplikan

aron.lakatos
sumber

14

Berhasil, tapi jangan lupa untuk menempatkan list-style-type: none;ke <ul>elemen.

toesslab

5

tanpa indentasi sajaul li:before{ content:"- ";}

Qlimax

4

Saya lebih memilih untuk menambahkan display: block; float: left;ke li:beforeyang dapat lebih mudah menariknya keluar dari aliran konten, jika tidak cukup sulit / kereta untuk mendapatkan baris pertama dan berikutnya untuk berbaris dengan benar. Atau jawaban Keyan Zhang juga melakukan ini dengan penentuan posisi absolut.

Simon Timur

8

cukup bodoh yang list-style-type dashbelum menjadi bagian dari CSS

Pixelomo

Apa yang akan menjadi solusi hanya HTML yang mirip dengan yang Anda usulkan?

pluton

74

Ini versi tanpa posisi relatif atau absolut dan tanpa indentasi teks:

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

Nikmati ;)

velop
sumber

1

Bagus! saya sarankan 'ul.dash> li: before'. jika tidak, uls dalam akan kacau.

w.stoettinger

1

Saya lebih memilih untuk menambahkan display: block; float: left;ke li:beforeyang dapat lebih mudah menariknya keluar dari aliran konten, jika tidak cukup sulit / kereta untuk mendapatkan baris pertama dan berikutnya untuk berbaris dengan benar. Atau jawaban Keyan Zhang juga melakukan ini dengan penentuan posisi absolut.

Simon East

Saya menggunakan ini sebagai .activekelas navigasi dengan li:before { visibility: hidden; }danli.active:before { visibility: visible; }

sshow

Imo saran terbaik!

Ben Vertonghen

64

Gunakan ini:

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

Jase
sumber

3

Sayangnya, itu tidak menghormati warna teks css.

Hereblur

7

Satu-satunya solusi yang mungkin untuk email

Oleg

Ini tidak berfungsi untuk Gmail (Nov 2018) dan Outlook 2016 sekarang.

user2875289

33

ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

demo biola

Keyan Zhang
sumber

25

Izinkan saya menambahkan versi saya juga, terutama bagi saya untuk menemukan solusi pilihan saya sendiri lagi:

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}

<!-- 
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash' 
Give credit and enjoy!
-->
Some text
<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
  <li>Approach!</li>
</ul>

Luaskan cuplikan

https://codepen.io/burningTyger/pen/dNzgrQ

tiga
sumber

IMHO ini solusi terbaik sejauh ini. Terima kasih untuk berbagi!

Axel

14

Dalam kasus saya menambahkan kode ini ke CSS

ul {
    list-style-type: '- ';
}

sudah cukup. Sederhana seperti itu.

Albert Sosnowski
sumber

1

Dengan asumsi ini adalah tambahan yang relatif baru untuk CSS karena saya tidak dapat menemukan jawaban lain yang menyebutkannya, tetapi ini benar-benar harus menjadi jawaban yang diterima hari ini.

ahstro

4

Ini sepertinya hanya didukung di desktop Firefox: developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

dave

Ini sekarang juga didukung di Chrome (per 79 saya percaya): chromestatus.com/feature/5893875400966144 dan caniuse.com/#feat=mdn-css_properties_list-style-type_string

Alex

9

Salah satu jawaban teratas tidak berfungsi untuk saya, karena, setelah sedikit coba-coba, li: sebelumnya juga memerlukan tampilan aturan css: inline-block.

Jadi ini adalah jawaban yang berfungsi penuh untuk saya:

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}

Joery
sumber

ini ditulis dalam KURANG / SASS.

Arslan Ameer

7

ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}

pengguna3849374
sumber

mungkin `` ul {margin: 0; daftar-gaya-jenis: tidak ada; } ul li: before {content: "-";} `` `kalau tidak, itu juga mempengaruhi daftar ol

Sasha Bond

5

Ini versi biola saya :

The (modernizr) kelas .generatedcontentatas <html>praktis berarti IE8 + dan setiap browser waras lainnya.

<html class="generatedcontent">
  <ul class="ul-dash hanging">
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
  </ul>

CSS:

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging > li { /* remove '>' for IE6 support */
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}

biziclop
sumber

3

Saya tidak tahu apakah ada cara yang lebih baik, tetapi Anda bisa membuat grafik titik peluru khusus yang menggambarkan tanda hubung, dan kemudian beri tahu browser bahwa Anda ingin menggunakannya di daftar Anda dengan properti tipe-tipe-daftar . Contoh di halaman itu menunjukkan cara menggunakan grafik sebagai bullet.

Saya tidak pernah mencoba menggunakan: sebelumnya dengan cara yang Anda miliki, meskipun mungkin berhasil. Kelemahannya adalah tidak akan didukung oleh beberapa browser lama. Reaksi saya adalah bahwa ini masih cukup penting untuk dipertimbangkan. Di masa depan, ini mungkin tidak sepenting itu.

EDIT: Saya telah melakukan sedikit pengujian dengan pendekatan OP. Di IE8, saya tidak bisa mendapatkan teknik untuk bekerja, jadi itu pasti belum cross-browser. Selain itu, di Firefox dan Chrome, pengaturan tipe-tipe-daftar untuk tidak bersama-sama tampaknya diabaikan.

TNi
sumber

3

Solusi saya adalah menambahkan tag rentang ekstra dengan mdash di dalamnya:

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>

dan menambahkan ke css:

ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}

Victor Stagurov
sumber

3

Cara lain:

li:before {
  content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}

imos
sumber

3

CSS:

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

blackchestnut
sumber

1

ini tidak berfungsi untuk item yang menjangkau lebih dari satu baris

jenlampton

2

Alih-alih menggunakan lu li, digunakan dl (definition list) and dd. <dd>dapat didefinisikan menggunakan gaya css standar seperti {color:blue;font-size:1em;}dan gunakan sebagai penanda simbol apa pun yang Anda tempatkan setelah tag html. Ini bekerja seperti ul li, tetapi memungkinkan Anda untuk menggunakan simbol apa pun, Anda hanya perlu indentasi untuk mendapatkan efek daftar lekukan yang biasanya Anda dapatkan ul li.

CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>

Memberi Anda kode lebih bersih! Dengan begitu, Anda bisa menggunakan semua jenis karakter sebagai penanda! Indent terdiri dari sekitar -10pxdan berfungsi dengan sempurna!

Carolyne Comtois
sumber

7

Ini sangat buruk karena dua alasan. Pertama, Anda meletakkan karakter bullet Anda langsung di teks, mencampur konten dan gaya. Kedua, Anda menyalahgunakan elemen dl, inilah artikel tentang penggunaan yang benar .

mzgajner

1

Bagi siapa pun yang memiliki masalah ini hari ini, solusinya adalah:

daftar-gaya: "-"

Lebah Kelelawar
sumber

-1

Apa yang berhasil untuk saya adalah

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>

C oneil
sumber

Tanda hubung jenis daftar HTML

Jawaban: