Aumentare la dimensione di tipo bullet in stile elenco

C'è un modo per aumentare le dimensioni di solo il tipo di elenco di elenchi puntati usando CSS? Non voglio aumentare la dimensione del testo del proiettile, solo il tipo di proiettile. Non posso neanche usare immagini o JavaScript. Deve essere qualcosa che posso incorporare nei tag <style> all'interno del tag <head>.Aumentare la dimensione di tipo bullet in stile elenco

fonte

2011-12-09 Chris22

potrebbe non funzionare nella vecchia versione di IE.

li:before{ content:'\00b7'; font-size:100px; }

Demo

per IE6:

senza javascript o le immagini, mi sento di raccomandare mettere un <span>·</span> all'inizio di ogni elemento dell'elenco e styling che.

fonte

2011-12-09 19:49:42 bookcasey

+1 ottimo esempio (il vertical-align: middle in realtà era CRUCIAL qui. Bello)!anche insted di "\ 00b7" può usare "•" :) –

Generalmente uso i valori esadecimali di escape, poiché ho già avuto qualche problema con l'uso del simbolo. Ad esempio, questo: 'span: before {content:" "";} 'non funziona, ma questo:' span: before {content: "\ 0022";} 'does. – bookcasey

Grazie, bookcasey. Ottima soluzione, anche se non posso usare ': before' dal suo sito Web IE6. – Chris22

Quando dici che non puoi usare le immagini, intendi che non puoi modificare i tag li per aggiungere immagini o che non puoi usare affatto un'immagine?

Negli elementi li, è possibile impostare la proprietà list-style-image.

li { 
list-style-image: url('/imagepath.png'); 
}

Questo può ancora andare nel tag head senza modificare il markup della lista.

fonte

2011-12-09 19:48:31 Brandon

grazie, Brandon. Sì, non posso usare affatto le immagini. – Chris22

Trovato questo http://stackoverflow.com/questions/7563344/how-can-i-increase-the-bullet-size-in-a-li. Guarderò più dentro. Anche se non posso usare javascript. È un'app davvero vecchia per uso speciale. – Chris22

nessun modo che io sappia.

ma si poteva fingere utilizzando: prima

ul,li{list-style:none;} 
li:before{content:"o";font-weight:bold;}

fonte

2011-12-09 19:49:03

Grazie, Kae. È per un sito IE6 quindi non è possibile utilizzare 'before' – Chris22

inserire qualsiasi colore di sfondo per il tag (es: .menu li a) e aggiungere padding per il quale si otterrà come una finestra quindi border-radius e quindi per (.menu li) applicare il riempimento per sinistra e destra per la spaziatura ... (spiegato nell'ordine inverso)

#header .nav-primary ul li{float:left;display:block;margin:0;padding:0 22px;} 
#header .nav-primary ul li a{text-decoration:none;color:#030;background:#CBCBCB;border-radius:5px;padding:5px 0px;}

fonte

2012-12-20 20:41:22 Lohith

Ho dovuto fare qualcosa di simile. Il mio metodo è stato quello di aggiungere un tag span intorno al testo all'interno del Li:

<li><span>Item 1</span></li> 
<li><span>Item 1</span></li>

Poi è possibile aumentare la font-size di voi li e ridurre la dimensione del carattere del vostro arco:

li { 
    font-size: 20px; 
} 
li span { 
    font-size: 14px; 
}

È potrebbe essere necessario regolare l'altezza delle linee e i margini per adattarsi alle dimensioni aggiuntive. Ma questo metodo ti permetterà anche di colorare i proiettili separati dal testo.

fonte

2015-03-20 13:18:43

Funziona bene per lo stile dei punti elenco nelle e-mail poiché puoi usare stili in linea per loro. Oh l'orrore delle email HTML! :) – Tessa

Cercavo una soluzione anche a questo e ho scoperto che se si annidava un p all'interno di li, è possibile definire separatamente i punti elenco e il testo dei punti elenco.

<div> 
    <ul> 
    <li><p>Hello</p></li> 
    </ul> 
</div 

div ul li { 
/*this will style the bullets*/ 
} 

div ul li p { 
/*this will style the text*/ 
}

fonte

2017-04-04 23:04:36 deeble

Aumentare la dimensione di tipo bullet in stile elenco

risposta

Problemi correlati