Aumentar el tamaño de la lista tipo bullet tipo

¿Hay alguna manera de aumentar el tamaño de solo la viñeta list-style-type usando CSS? No quiero aumentar el tamaño del texto de la viñeta, solo el tipo de viñeta. No puedo usar imágenes o JavaScript tampoco. Tiene que ser algo que pueda incrustar dentro de las etiquetas <style> dentro de la etiqueta <head>.Aumentar el tamaño de la lista tipo bullet tipo

Fuente

2011-12-09 Chris22

no podría funcionar en la versión antigua de Internet Explorer.

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

Demo

Para IE6:

sin JavaScript o imágenes, yo recomiendo poner un <span>·</span> en el comienzo de cada elemento de la lista y el estilo que.

Fuente

2011-12-09 19:49:42 bookcasey

+ (el vertical-align: el medio era realmente CRUCIAL aquí.también inssted de "\ 00b7" puede usar "•" :) –

Generalmente uso los valores hexadecimales escapados, ya que he tenido algunos problemas antes con el uso del símbolo. Por ejemplo, esto: 'span: before {content:" "";} 'no funciona, pero esto:' span: before {content: "\ 0022";} 'hace. – bookcasey

Gracias, bookcasey. Excelente solución, aunque no puedo usar ': before' ya que es solo para un sitio web IE6. – Chris22

Cuando dice que no puede usar imágenes, ¿quiere decir que no puede editar las etiquetas li para agregar imágenes o que no puede usarlas?

En los elementos li, puede establecer la propiedad list-style-image.

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

Esto aún puede ir en la etiqueta de su cabeza sin editar el marcado de la lista.

Fuente

2011-12-09 19:48:31 Brandon

gracias, Brandon. Yeh, no puedo usar imágenes en absoluto. – Chris22

Encontrado este http://stackoverflow.com/questions/7563344/how-can-i-increase-the-bullet-size-in-a-li. Veré más en eso. Aunque tampoco puedo usar javascript. Es una aplicación realmente antigua para uso especial. – Chris22

De ninguna manera que yo sepa.

pero se podía fingir mediante el uso de: antes

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

Fuente

2011-12-09 19:49:03

Gracias, Kae. Es para un sitio de IE6, por lo que no se puede usar el ejemplo anterior de 'before' – Chris22

coloque cualquier color de fondo para la etiqueta (por ejemplo: .menu li a) y agregue relleno para que obtenga como un cuadro luego radio de borde y luego para (.menu li) aplicar relleno para izquierda y derecha para espaciar ... (explicado en orden 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;}

Fuente

2012-12-20 20:41:22 Lohith

He tenido que hacer algo similar. Mi método consistía en añadir un código span alrededor del texto dentro de la li:

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

A continuación, se puede aumentar el tamaño de fuente de la que Li y reducir el tamaño de la fuente de su periodo:

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

Usted Puede ser necesario ajustar las alturas de línea y los márgenes para acomodar el tamaño extra de li. Pero este método también le permitirá colorear las viñetas por separado del texto.

Fuente

2015-03-20 13:18:43

Esto funciona muy bien para diseñar las viñetas en los correos electrónicos ya que puede usar estilos en línea para ellas. ¡Ah, el horror de los correos electrónicos HTML! :) – Tessa

Estaba buscando una solución para esto también y encontré que si anida una p dentro de li, puede diseñar las viñetas y el texto de la viñeta por separado.

<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*/ 
}

Fuente

2017-04-04 23:04:36 deeble

Aumentar el tamaño de la lista tipo bullet tipo

Respuesta

Cuestiones relacionadas