Listar productos con sus precios con CSS
Necesito hacer una lista de productos con sus precios, pero quiero que los productos estén alineados a la izquierda, los precios alineados a la derecha y entre medias se rellene con una linea de puntos.
El efecto visual es:
Producto 1 ... Precio 1
Producto 222222222222 ... Precio 2
Pero no consigo que queden alineados los productos a la izquierda y los precios a la derecha.
1 respuesta
En mi opinión lo estás planteando de la manera equivocada. Quizás la manera más sencilla sería crear una tabla (o un conjunto de capas, lo que prefieras), de dos columnas. En la primera, de ancho fijo (por ejemplo 50 caracteres), pones el producto + puntos. Los puntos deberías calcularlos con una función de javascript por ejemplo, restando el número de caracteres que hay al número del ancho de la columna.
Con lo cual, la pregunta deberías buscarla más por javascript que por CSS.
Disculpame, soy muy torpe, o mejor dicho inexperto, totalmente autodidacta y no dispongo de nadie que me ayude a excepción de leer foros y tutoriales.
He creado las tablas, pero no consigo hacer que se ajuste correctamente. Cuando reduzco la pantalla, por ejemplo, se crean 2 lineas, es decir, el precio se me baja a la siguiente linea
Quizás es mucho pedir, pero ¿Podrías ponerme el código para crear el ejemplo que te he indicado?
Te lo agradeceria
Si pones las tablas con ancho fijo, con píxeles, no debería ocurrir nada cuando cambias el tamaño de la ventana... En cuanto al código, esta sección es de CSS...