HTML liste stili türü tire

222

HTML'de tire (yani - veya - –veya - —) ile liste stili oluşturmanın bir yolu var mı?

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

çıktısı:

- abc

Bu li:before { content: "-" };seçeneğin eksilerini bilmiyor olsam da (ve geri bildirim için çok zorlanırım) bunu böyle bir şeyle yapmak bana geldi .

Daha genel olarak, liste öğeleri için genel karakterlerin nasıl kullanılacağını bilmek sorun olmaz.

— Brian M. Hunt
kaynak

79

tire listelerde yaygın olarak kullanıldığından neden css'de varsayılan olarak bulunmuyor?

— temirbek

101

daha da önemlisi, neden ermeni numaralandırma ve katakana var ... ama tire yok?

— Henry C

108

Sen kullanabilirsiniz :beforeve content:bunun altında IE 7 veya desteklenmediği akılda tutarak. Bununla ilgili sorun yoksa, bu en iyi çözümdür. Tüm ayrıntılar için Kullanabilir miyim veya QuirksMode CSS uyumluluk tablolarına bakın.

Eski tarayıcılarda çalışması gereken biraz nahoş bir çözüm, mermi noktası için bir görüntü kullanmak ve görüntünün bir çizgi gibi görünmesini sağlamaktır. Örnekler için W3C list-style-imagesayfasına bakın .

— Darko Z
kaynak

27

Sorun :beforeşu ki, liste öğeleri birkaç satıra yayıldığında, 2. satırdaki girintinin kesik çizginin olduğu yerden başlaması, girintili liste efektini bozmasıdır. Bundan kaçınmak için asılı girintiler kullanmanız gerekir. Şuna

— chiborg

3

Mdash'ı contentkullanmak içincontent: "\2014\a0"

— Ivan Z

Daha genel ve daha az ayrıntılı olan @ üçün cevabına bakın!

— Ben Vertonghen

221

Girintili liste efektini :beforesözde sınıfla birlikte tutmak için kolay bir düzeltme (metin girintisi) vardır .

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

Snippet'i genişlet

— aron.lakatos
kaynak

14

Çalışır, ancak koymak unutmayın list-style-type: none;için <ul>eleman.

— toesslab

5

girinti olmadanul li:before{ content:"- ";}

— Qlimax

4

Ben eklemeyi tercih display: block; float: left;etmek li:before, aksi takdirde birinci ve müteakip hatlarının doğru sıraya almak oldukça zor / adamcağız daha kolay içerik akışının onu çıkarır ki. Ya da Keyan Zhang'ın cevabı bunu mutlak konumlandırma ile de yapar.

— Simon East

8

list-style-type dashCSS'nin bir parçası olmayan oldukça aptal

— Pixelomo

Önerdiğinize benzer, yalnızca HTML içeren bir çözüm ne olabilir?

— pluton

74

İşte göreceli veya mutlak konumu olmayan ve metin girintisi olmayan bir sürüm:

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

Zevk almak ;)

— geliştirmem
kaynak

1

harika! 'ul.dash> li: önce' öneririm. aksi takdirde iç ul'ler berbat olur.

— w. Tototingtinger

1

Ben eklemeyi tercih display: block; float: left;etmek li:before, aksi takdirde birinci ve müteakip hatlarının doğru sıraya almak oldukça zor / adamcağız daha kolay içerik akışının onu çıkarır ki. Ya da Keyan Zhang'ın cevabı bunu mutlak konumlandırma ile de yapar.

— Simon East

Bunu and.activeli:before { visibility: hidden; }li.active:before { visibility: visible; }

— sshow

En iyi öneri imo!

— Ben Vertonghen

64

Bunu kullan:

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

— Jase
kaynak

3

Ne yazık ki, css metninin renklerine saygı duymaz.

— Hereblur

7

E-postalar için mümkün olan tek çözüm

— Oleg

Hem Gmail (Kasım 2018) hem de Outlook 2016 için çalışmıyor.

— user2875289

33

ul {
  list-style-type: none;
}

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

demo keman

— Keyan Zhang
kaynak

25

Benim versiyonumu da ekleyeyim, çoğunlukla kendi tercih ettiğim çözümü tekrar bulabilmek için:

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>

Snippet'i genişlet

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

— üç
kaynak

IMHO şimdiye kadarki en iyi çözüm. Paylaşım için teşekkürler!

— Axel

15

Benim durumumda bu kodu CSS'ye ekleme

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

yeterliydi. Olduğu kadar basit.

— Albert Sosnowski
kaynak

1

Bunun CSS'ye nispeten yeni bir ek olduğunu varsayarsak, bundan bahseden başka bir cevap bulamıyorum, ancak bu gerçekten bu günlerde kabul edilen cevap olmalı.

— ahstro

4

Bu yalnızca masaüstü Firefox'ta destekleniyor gibi görünüyor: developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

— dave

Bu artık Chrome'da da destekleniyor (79 sanırım): chromestatus.com/feature/5893875400966144 ve caniuse.com/#feat=mdn-css_properties_list-style-type_string

— Alex

9

En iyi cevaplardan biri benim için işe yaramadı, çünkü biraz deneme yanılma sonrasında li: önce css kuralı ekranına da ihtiyaç duyuldu: satır içi blok.

Bu benim için tam olarak çalışan bir cevap:

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

— Joery
kaynak

bu DAHA / SASS olarak yazılmıştır.

— Arslan Ameer

7

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

— user3849374
kaynak

muhtemelen `` ul {kenar boşluğu: 0; liste stili tipi: yok; } ul li: {content: "-";} `` `` aksi takdirde ol listelerini de etkiler

— Sasha Bond

5

İşte benim keman versiyonu:

(Modernizr) sınıfı .generatedcontentüzerinde <html>pratik olarak IE8 + ve diğer her aklı başında tarayıcısını anlamına gelir.

<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
kaynak

3

Daha iyi bir yol olup olmadığını bilmiyorum, ancak bir çizgi gösteren özel bir madde işareti grafiği oluşturabilir ve daha sonra tarayıcıya listenizde liste stili türüyle kullanmak istediğinizi bildirebilirsiniz. özelliğiyle . Bu sayfadaki bir örnek, bir grafiğin madde işareti olarak nasıl kullanılacağını gösterir.

Hiç kullanmaya çalışmadım: Daha önce sahip olduğunuz şekilde, ancak işe yarayabilir. Dezavantajı, bazı eski tarayıcılar tarafından desteklenmeyecek olmasıdır. Bağırsak reaksiyonum, bunun hala dikkate alınacak kadar önemli olduğudur. Gelecekte, bu kadar önemli olmayabilir.

EDIT: OP yaklaşımı ile küçük bir test yaptım. IE8'de, tekniği çalıştıramadım, bu yüzden kesinlikle çapraz tarayıcı değil. Ayrıca, Firefox ve Chrome'da, liste stili türünün birlikte hiçbirine ayarlanmasının göz ardı edildiği görülmektedir.

— TNI
kaynak

3

Benim çözüm mdash ile ekstra span etiketi eklemektir:

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

ve css'e ekleme:

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

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

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

— Victor Stagurov
kaynak

3

Diğer yol:

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
kaynak

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
kaynak

1

bu, birden fazla satıra yayılan öğeler için çalışmaz

— jenlampton

2

Lu li kullanmak yerine, kullanılır dl (definition list) and dd. html etiketinden sonra yerleştirdiğiniz herhangi bir sembol <dd>gibi standart css stili kullanılarak tanımlanabilir {color:blue;font-size:1em;}. Ul li gibi çalışır, ancak herhangi bir sembolü kullanmanıza izin verir, normalde elde ettiğiniz girintili liste efektini almak için onu girintilemeniz yeterlidir ul li.

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

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

Size daha temiz kod verir! Bu şekilde, işaretçi olarak herhangi bir karakteri kullanabilirsiniz! Girinti hakkında -10pxve mükemmel çalışıyor!

— Carolyne Comtois
kaynak

7

Bu iki nedenden dolayı oldukça kötü. Öncelikle, madde işareti karakterlerinizi doğrudan metne koyar, içeriği ve stili karıştırırsınız. İkincisi, dl öğesini yanlış kullanıyorsunuz , doğru kullanımla ilgili bir makale .

— mzgajner

1

Bugün bu sorunu yaşayan herkes için çözüm basitçe:

liste biçimi: "- "

— Arı Yarasa
kaynak

-1

Benim için işe yarayan

<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
kaynak