Simbolo di punto elenco personalizzato per <li> elementi in <ul> che è un carattere normale e non un'immagine


125

Mi rendo conto che è possibile specificare una grafica personalizzata come carattere di sostituzione del punto elenco, utilizzando l'attributo CSS:

list-style-image

E poi dandogli un URL.

Tuttavia, nel mio caso, voglio solo usare il simbolo "+". Non voglio dover creare un'immagine per questo e poi indicarla. Preferisco semplicemente istruire l'elenco non ordinato di utilizzare un simbolo più come simbolo del punto elenco.

Può essere fatto o sono costretto a renderlo prima un grafico?

Risposte:


81

Quanto segue è citato da Taming Lists :

Ci possono essere momenti in cui hai un elenco, ma non vuoi proiettili o vuoi usare qualche altro carattere al posto del proiettile. Anche in questo caso, CSS fornisce una soluzione semplice. Aggiungi semplicemente lo stile elenco: nessuno; alla tua regola e costringi gli elenchi a visualizzare con rientri sporgenti. La regola sarà simile a questa:

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

O il padding o il margine devono essere impostati a zero, con l'altro impostato a 1em. A seconda del "punto elenco" scelto, potrebbe essere necessario modificare questo valore. Il rientro di testo negativo fa sì che la prima riga venga spostata a sinistra di tale importo, creando un rientro sporgente.

L'HTML conterrà il nostro UL standard, ma con qualsiasi carattere o entità HTML che desideri utilizzare al posto del punto che precede il contenuto dell'elemento dell'elenco. Nel nostro caso useremo », la virgoletta del doppio angolo retto:».

»Articolo 1
» Articolo 2
»Articolo 3
» Articolo 4
»Articolo 5 faremo
   un po 'più di tempo in modo che
   si avvolga


1
La tua soluzione ha funzionato, in combinazione con lo pseudo-selettore: before che tu e @Tieson T. entrambi puntate. Mi è piaciuto che tu abbia sottolineato il modo in cui i vari attributi su <UL> lavorano insieme per imitare il rientro del proiettile.
idStar

9
Ecco come l'ho messo insieme, che ha funzionato: ul {font-size: 14px; line-height: 16px; stile elenco: nessuno; margine sinistro: 0; padding-left: 1em; text-indent: -1em; } li: prima di {contenuto: "+"; } Ho dovuto mettere uno spazio dopo il simbolo +, ma sembra ragionevolmente ben allineato.
idStar

6
Purtroppo con questo metodo il segno del proiettile viene incluso nelle selezioni, cosa che non è il caso dei normali proiettili.
Konrad Höffner

169

Questa è una risposta tardiva, ma mi sono appena imbattuto in questo ... Per ottenere il rientro corretto su tutte le righe che vanno a capo, prova in questo modo:

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

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

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

1
Per me, funziona meglio usare ch come unità di misura, in particolare per text-indent: -2chtenere conto del segno + e dello spazio dopo di esso, quindi padding-right: 1chaggiungere quello spazio. Tuttavia, un grande +1.
cobaltduck

44

Tante soluzioni.
Ma penso ancora che ci siano margini di miglioramento.

vantaggi:

  • codice molto compatto
  • funziona con qualsiasi dimensione del carattere
    (nessun valore pixel assoluto contenuto)
  • allinea perfettamente le righe
    (nessun leggero spostamento tra la prima riga e le righe successive)

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
questo è il migliore
user3168511

1
Questa è una risposta migliore secondo me perché indica come puoi personalizzare anche altri dettagli. E ha anche in allegato "Run code snippet"!
Ionuț Ciuta

1
Questa dovrebbe essere la risposta. Pulito e semplice
EvilDr

1
Stavo cercando una soluzione usando un'immagine e ho provato molte risposte, ma questa ha funzionato meglio per me! Sono stato in grado di utilizzare content: url('link-to-my-asset.svg');e impostare la larghezza dell'immagine e il riempimento tra il punto elenco e il contenuto. Grazie!
AnnieP

Questa è una buona risposta. Tuttavia, avevo bisogno di una soluzione che potesse supportare anche il conteggio delle colonne
Kushagr Arora il

29

Questa è la soluzione W3C. Funziona in Firefox e 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
Sebbene sembri funzionare nelle versioni attuali di Firefox, il risultato è estremamente brutto: il punto elenco personalizzato viene posizionato proprio davanti al contenuto del testo (agganciandolo), quasi come se li:before {content:"…";}fosse usato senza altri rientri e allineamenti.
Anton Samsonov

19

Ecco la migliore soluzione che ho trovato finora. Funziona benissimo ed è cross-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;
}

L'importante è avere il carattere in un blocco mobile con una larghezza fissa in modo che il testo rimanga allineato se è troppo lungo per stare su una singola riga. 1.2em è la larghezza che desideri per il tuo personaggio, modificala in base alle tue esigenze.


Questa è facilmente la migliore soluzione che ho trovato.
Charles Roper

ab-uso di floatnuovo? ... naah.


10

La mia soluzione utilizza il posizionamento per allineare automaticamente le linee avvolte correttamente. Quindi non devi preoccuparti di impostare il padding proprio su li: prima.

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

È consigliabile qualificare lo stile di in <li>modo che non influisca sugli <ol>elementi dell'elenco. Così:

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 offre un'ottima soluzione pronta all'uso:

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


Ho votato per questo solo per / * copia e incolla un punto elenco da HTML nel browser in css (senza usare codici ascii) * /
kheya

2

Stile del trattino:

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

Preferisco usare il margine negativo, ti dà più controllo

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

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

1

È interessante notare che non credo che nessuna delle soluzioni pubblicate sia abbastanza buona, perché si basano sul fatto che il carattere utilizzato è largo 1em, il che non deve essere necessariamente così (con forse l'eccezione della risposta di John Magnolia che tuttavia utilizza float che possono complicare le cose in un altro modo). Ecco il mio tentativo:

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>

Questo ha questi vantaggi (rispetto ad altre soluzioni):

  1. Non si basa sulla larghezza del simbolo come si vede nell'esempio. Ho usato due caratteri per dimostrare che funziona anche con proiettili larghi. Se provi questo in altre soluzioni ottieni il testo disallineato (infatti è anche visibile con il simbolo * negli zoom più alti).
  2. Ti dà il controllo totale dello spazio utilizzato dai proiettili . Puoi sostituire 30px con qualsiasi cosa (anche 1em ecc.). Basta non dimenticare di cambiarlo su tutti e tre i posti.
  3. Se ti dà il controllo totale del posizionamento del proiettile . Basta sostituire text-align: center;con qualcosa di tuo gradimento. Ad esempio puoi provare color: red; text-align: right; padding-right: 5px; box-sizing: border-box; o se non ti piace giocare con il border-box, sottrai semplicemente il padding (5px) dalla larghezza (es. Larghezza: 25px in questo esempio). Ci sono molte opzioni.
  4. Non utilizza float quindi può essere contenuto ovunque.

Godere.


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>


Grazie - Questo è molto pulito e mi sono dimenticato di !important, che era vitale per far funzionare il mio CSS personalizzato in Blogspot
velkoon

-2

prova questo

    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>

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.