Por defecto, la lista ordenada tiene el siguiente aspecto:Retire el espacio izquierdo de una lista ordenada (OL)
Hay cierto espacio en el lado izquierdo de la lista. ¿Hay alguna forma de eliminar esos espacios?
Esto es lo que quiero:
En mi sitio web, la fuente de la familia y el tamaño de fuente se cambian por los usuarios de forma dinámica. Por lo tanto, no puedo predefinir el relleno, a la izquierda.
Debe poder usar em para un tamaño escalable (en lugar de un tamaño de px fijo). Esto permitiría escalar el tamaño de la fuente pero coincidir con el tamaño escalado al aplicar el relleno.
ol { padding-left: 1.8em; }
Aquí es una jsfiddle para ilustrar. Cambia el tamaño de letra body a diferentes tamaños de escala (prueba 1em, 2em, etc.) y verás que el párrafo coincide con el ol a la izquierda.
Puede encontrar que los navegadores rinden en diferentes tamaños. 1.8e, funciona con Chrome, pero puede requerir 1.6em o 1.9em para Firefox o IE. Lo que ocurre con la web es que es fluida y escalable, por lo que capturar con precisión de píxeles, especialmente cuando se trabaja con fuentes escalables por el usuario, casi siempre es una situación sin salida.
¡Gracias por la respuesta detallada! – Alan
Sí, de manera predeterminada sería 40px. El uso de CSS:
ul {padding-left: 1.5em; list-style: decimal;}
¡Gracias por la respuesta de Praveen!10px es bueno si el tamaño de fuente es pequeño. Sin embargo, si el tamaño de letra es grande, saldrá de la línea recta. ¿Hay algún método para resolver este problema? ¡Gracias! – Alan
¡Simple! Da el 'padding-left' en' em' y no en 'px'. Es el porcentaje del tamaño de la fuente. Por ahora, si le das '1.5em', se mantiene bien para ** todos los tamaños de fuente **, incluso si ** aumentan o disminuyen dinámicamente **. Revisa. :) He actualizado mi respuesta. : D –
Cuanto sea el tamaño decimal, su contenido sigue siendo bueno. Los números estarán ** alineados a la derecha ** y el contenido estará ** alineado a la izquierda **. ¡Funciona! ¡Créeme! :) –
En mi sitio web, el
font-familyyfont-sizeserán cambiados por los usuarios de forma dinámica. Por lo tanto, no puedo preestablecerpadding-left.
¿Por qué eso le impediría usar padding-left? Es absolutamente la herramienta correcta para usar cuando desea anular la hoja de estilo predeterminada del navegador.
ul {
padding-left: 0;
/* If you want you can change the list type from inside or outside */
list-style: inside decimal;
}
En su caso, los números no se mostrarán amigos! –
@PraveenKumar Siempre y cuando el contenedor no tenga 'desbordamiento: oculto', lo estarán. – alex
Pero parece extraño, salir de la línea recta ¿no? –
Si desea asegurarse de que su lista esté al nivel del límite izquierdo de su contenedor principal, utilice su propia imagen de lista de viñetas.
Puede utilizar el siguiente CSS para personalizar sus UL:
UL {
margin-left: 0;
list-style: none outside url("myImage.png");
}
Espero que esto ayude! :)
ol, ol li { margin-left: 0; padding-left: 0; }
ol { margin-left: 1.3em; }
El espaciado predeterminado a la izquierda puede ser causado por el relleno margen izquierdo o izquierda de ol o li, o una combinación de los mismos (en función de navegador). Por lo tanto, para obtener un espaciado específico, establezca todas esas propiedades en cero, excepto una de ellas, que establezca en el valor que prefiera. Tenga en cuenta que este espaciado debe ser lo suficientemente grande para los marcadores de lista (números); de lo contrario, no aparecerán o se verán truncados. El valor de 1.3em (es decir, 1,3 veces el tamaño de fuente) debe ser lo suficientemente grande para ellos y dejar poco o ningún espacio adicional a la izquierda de ellos.
Restablezca el relleno utilizando CSS. :) –