Dash di tipo stile elenco HTML

222

C'è un modo per creare uno stile elenco in HTML con un trattino (cioè - o - –o - —) cioè

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

Emissione:

- abc

Mi è venuto in mente di farlo con qualcosa del genere li:before { content: "-" };, anche se non conosco i contro di quell'opzione (e sarei molto obbligato per il feedback).

Più in generale, non mi dispiacerebbe sapere come usare caratteri generici per gli elementi dell'elenco.

— Brian M. Hunt
fonte

79

poiché il trattino è comunemente usato negli elenchi perché non è incluso di default in CSS?

— temirbek,

101

ancora più importante, perché esiste la numerazione armena e il katakana ... ma non i trattini?

— Henry C,

108

È possibile utilizzare :beforee content:tenere presente che questo non è supportato in IE 7 o versioni successive. Se stai bene, allora questa è la soluzione migliore. Consulta le tabelle di compatibilità CSS Can I Use o QuirksMode per tutti i dettagli.

Una soluzione leggermente più cattiva che dovrebbe funzionare nei browser più vecchi è quella di utilizzare un'immagine per il punto elenco e rendere l'immagine come un trattino. Vedi la pagina del W3Clist-style-image per esempi.

— Darko Z
fonte

27

Il problema :beforeè che quando gli elementi dell'elenco si estendono su più righe, il rientro sulla seconda riga inizia dove si trova il trattino, rovinando così l'effetto di elenco rientrato. È necessario utilizzare rientri pendenti per evitarlo. Vedi questo: alistapart.com/articles/taminglists

— chiborg

3

Per mettere in contentuso mdashcontent: "\2014\a0"

— Ivan Z,

Vedi la risposta di @three, che è più generica e meno dettagliata!

— Ben Vertonghen,

221

Esiste una soluzione semplice (rientro del testo) per mantenere l'effetto di elenco rientrato con la :beforepseudo classe.

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

Espandi frammento

— aron.lakatos
fonte

14

Funziona, ma non dimenticare di mettere list-style-type: none;l' <ul>elemento.

— Toesslab,

5

senza indentazione soloul li:before{ content:"- ";}

— Qlimax,

4

Preferisco aggiungere display: block; float: left;a ciò li:beforeche può più facilmente estrarlo dal flusso di contenuti, altrimenti è piuttosto difficile / buggy ottenere la prima e le successive righe per allinearsi correttamente. O la risposta di Keyan Zhang lo fa anche con un posizionamento assoluto.

— Simon East,

8

piuttosto stupido che list-style-type dashnon fa già parte del CSS

— Pixelomo,

Quale sarebbe una soluzione solo HTML simile a quella che hai proposto?

— pluton

74

Ecco una versione senza alcuna posizione relativa o assoluta e senza rientro del testo:

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

Godere ;)

— velop
fonte

1

grande! suggerirei 'ul.dash> li: before'. altrimenti gli ul interni vengono incasinati.

— w.stoettinger,

1

Preferisco aggiungere display: block; float: left;a ciò li:beforeche può più facilmente estrarlo dal flusso di contenuti, altrimenti è piuttosto difficile / buggy ottenere la prima e le successive righe per allinearsi correttamente. O la risposta di Keyan Zhang lo fa anche con un posizionamento assoluto.

— Simon East

Lo uso come .activelezione di navigazione con li:before { visibility: hidden; }eli.active:before { visibility: visible; }

— sshow il

Il miglior consiglio imo!

— Ben Vertonghen,

64

Usa questo:

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

— Jase
fonte

3

Sfortunatamente, non rispetta i colori del testo CSS.

— Hereblur,

7

L'unica soluzione possibile per le e

— Oleg,

Ora non funziona per Gmail (novembre 2018) e Outlook 2016.

— user2875289

33

ul {
  list-style-type: none;
}

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

violino demo

— Keyan Zhang
fonte

25

Consentitemi di aggiungere anche la mia versione, principalmente per trovare nuovamente la mia soluzione preferita:

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>

Espandi frammento

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

— tre
fonte

IMHO è la soluzione migliore finora. Grazie per la condivisione!

— Axel,

14

Nel mio caso l'aggiunta di questo codice ai CSS

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

era abbastanza. Così com'è.

— Albert Sosnowski
fonte

1

Supponendo che questa sia un'aggiunta relativamente nuova al CSS poiché non riesco a trovare un'altra risposta che la menzioni, ma questa dovrebbe essere davvero la risposta accettata in questi giorni.

— ahstro,

4

Questo sembra essere supportato solo su Firefox desktop: developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

— dave,

Questo è ora supportato anche in Chrome (a partire da 79 credo): chromestatus.com/feature/5893875400966144 e caniuse.com/#feat=mdn-css_properties_list-style-type_string

— Alex

9

Una delle risposte migliori non ha funzionato per me, perché, dopo un po 'di tentativi ed errori, il li: prima aveva anche bisogno della visualizzazione della regola css: inline-block.

Quindi questa è una risposta pienamente funzionante per me:

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

— Joery
fonte

questo è scritto in MENO / SASS.

— Arslan Ameer,

7

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

— user3849374
fonte

probabilmente `` ul {margin: 0; list-style-type: none; } ul li: before {content: "-";} `` `altrimenti influisce anche sugli elenchi precedenti

— Sasha Bond,

5

Ecco la mia versione di violino :

La classe (modernizr) .generatedcontentsu <html>praticamente significa IE8 + e ogni altro browser sano di mente.

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

3

Non so se esiste un modo migliore, ma è possibile creare un grafico a punti elenco personalizzato raffigurante un trattino e quindi far sapere al browser che si desidera utilizzarlo nell'elenco con la proprietà di tipo elenco . Un esempio in quella pagina mostra come usare un grafico come punto elenco.

Non ho mai provato a usare: prima come hai fatto, sebbene possa funzionare. Il rovescio della medaglia è che non sarà supportato da alcuni browser meno recenti. La mia reazione istintiva è che questo è ancora abbastanza importante da prendere in considerazione. In futuro, questo potrebbe non essere così importante.

EDIT: ho fatto un piccolo test con l'approccio del PO. In IE8, non sono riuscito a far funzionare la tecnica, quindi sicuramente non è ancora cross-browser. Inoltre, in Firefox e Chrome, l'impostazione del tipo di elenco su nessuno in combinazione sembra essere ignorata.

— TNI
fonte

3

La mia soluzione è l'aggiunta di tag span extra con mdash in esso:

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

e aggiungendo a 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
fonte

3

Un altro modo:

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
fonte

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
fonte

1

questo non funziona per gli articoli che si estendono su più di una riga

— jenlampton,

2

Invece di usare lu li, usato dl (definition list) and dd. <dd>può essere definito usando lo stile css standard come {color:blue;font-size:1em;}e usare come marker qualunque simbolo si inserisca dopo il tag html. Funziona come ul li, ma ti consente di usare qualsiasi simbolo, devi solo rientrarlo per ottenere l'effetto di elenco rientrato che normalmente ottieni ul li.

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

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

Ti dà un codice molto più pulito! In questo modo, puoi usare qualsiasi tipo di personaggio come marker! Indent è di circa -10pxe funziona perfettamente!

— Carolyne Comtois
fonte

7

Questo è abbastanza male per due motivi. In primo luogo, stai inserendo i tuoi personaggi proiettili direttamente nel testo, mescolando contenuto e stile. In secondo luogo, stai abusando dell'elemento dl, ecco un articolo sull'uso corretto .

— mzgajner,

1

Per chiunque abbia questo problema oggi, la soluzione è semplicemente:

stile elenco: "-"

— Bee Bat
fonte

-1

Ciò che ha funzionato per me è stato

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