Código para alinear y mejorar la visualización del texto

rikrdomat · 30 May 2023

Hola, me puede ayudar con el código para alinear un texto, no se si es con sangría espacio o como.

Necesito se vea así:
• Disponible por 1 Mes
• Hasta 2 Anuncios por
suscriptor
• Opciones de Contacto Limitadas
• Soporte Intermedio

Si se fijan la palabra suscriptor pertenece al mismo item de Hasta dos anuncios por...

Pero en mi web no puedo alienarlo.

El código que tengo actualmente es este:
<ul>
<li>Disponible por 1 Mes</li>
<li>Hasta 2 Anuncios por Suscriptor</li>
<li>Opciones de Contacto Limitadas</li>
<li>Soporte Intermedio</li>
</ul>

BotBeta · 30 May 2023

rikrdomat dijo:
Hola, me puede ayudar con el código para alinear un texto, no se si es con sangría espacio o como.

Necesito se vea así:
• Disponible por 1 Mes
• Hasta 2 Anuncios por
suscriptor
• Opciones de Contacto Limitadas
• Soporte Intermedio

Si se fijan la palabra suscriptor pertenece al mismo item de Hasta dos anuncios por...

Pero en mi web no puedo alienarlo.

El código que tengo actualmente es este:
<ul>
<li>Disponible por 1 Mes</li>
<li>Hasta 2 Anuncios por Suscriptor</li>
<li>Opciones de Contacto Limitadas</li>
<li>Soporte Intermedio</li>
</ul>

Para lograr la alineación que deseas, puedes agregar algún estilo CSS a tus elementos de lista. Una forma de hacerlo es utilizando el atributo "display" y asignarle un valor de "flex". A continuación, te muestro un posible código que podrías probar:

Insertar CODE, HTML o PHP:

<ul style="display: flex; flex-direction: column; align-items: flex-start;">
     <li style="margin-bottom: 10px;">Disponible por 1 Mes</li>
     <li style="margin-bottom: 10px;">Hasta 2 Anuncios por<br/>Suscriptor</li>
     <li style="margin-bottom: 10px;">Opciones de Contacto Limitadas</li>
     <li style="margin-bottom: 10px;">Soporte Intermedio</li>
</ul>

En este ejemplo, se le está indicando al elemento "ul" que se muestre con un layout en forma de columna con "flex-direction: column", y que los elementos se alineen hacia la izquierda con "align-items: flex-start". Mientras que en cada elemento de la lista "li", se le está asignando un margen inferior de 10px para que haya una separación visual entre ellos. Además, se ha agregado un salto de línea (br) para dejar un espacio entre las palabras "por" y "Suscriptor" en el segundo elemento de la lista.

Espero que te sea útil esta respuesta. Si tienes alguna otra consulta o duda, no dudes en preguntar.

rikrdomat · 30 May 2023

BotBeta dijo:
Para lograr la alineación que deseas, puedes agregar algún estilo CSS a tus elementos de lista. Una forma de hacerlo es utilizando el atributo "display" y asignarle un valor de "flex". A continuación, te muestro un posible código que podrías probar:

Insertar CODE, HTML o PHP:

<ul style="display: flex; flex-direction: column; align-items: flex-start;"> <li style="margin-bottom: 10px;">Disponible por 1 Mes</li> <li style="margin-bottom: 10px;">Hasta 2 Anuncios por Suscriptor</li> <li style="margin-bottom: 10px;">Opciones de Contacto Limitadas</li> <li style="margin-bottom: 10px;">Soporte Intermedio</li> </ul>

En este ejemplo, se le está indicando al elemento "ul" que se muestre con un layout en forma de columna con "flex-direction: column", y que los elementos se alineen hacia la izquierda con "align-items: flex-start". Mientras que en cada elemento de la lista "li", se le está asignando un margen inferior de 10px para que haya una separación visual entre ellos. Además, se ha agregado un salto de línea (br) para dejar un espacio entre las palabras "por" y "Suscriptor" en el segundo elemento de la lista.

Espero que te sea útil esta respuesta. Si tienes alguna otra consulta o duda, no dudes en preguntar.

Gracias por responder, no me funcionó, me sigue mostrando la palabra suscriptor alineada a la izquierda, no se alinea con el resto del texto. Adjunto screenshot.

Puko · 30 May 2023

'parte' la frase en dos ...

Hasta 3 Anuncios por 
Suscriptor

y a 'suscriptor' le agregas un con class por ejemplo 'iii'

<li>
Hasta 3 Anuncios por 
 Suscriptor
</li>

p.iii {
margin-left: 26px;
}

Previo...

Puko · 30 May 2023

O con 'text-indent' le 'agregas' un espaciooooo ...

<li>Hasta 2 Anuncios por Suscriptor</li>

p.espaciox {
text-indent: 26px;
}

O directo al html ...

<li>Hasta 2 Anuncios por Suscriptor</li>

previo...

rikrdomat · 30 May 2023

Puko dijo:
O con 'text-indent' le 'agregas' un espaciooooo ...

<li>Hasta 2 Anuncios por Suscriptor</li>

p.espaciox {
text-indent: 26px;
}

O directo al html ...

<li>Hasta 2 Anuncios por Suscriptor</li>

previo...
Ver el archivo adjunto 1025694

Gracias brother, ahora me surge otra duda, este cambio de la alineación solo quiero hacerla en la versión desktop, no quiero que se vea este estilo en móvil. Como puedo ocultarlo en moviles pero que si se vea en escritorio?

Puko · 30 May 2023

rikrdomat dijo:
solo quiero hacerla en la versión desktop,

Si usaste que es el 'normal/en pc' ...

<li>Hasta 2 Anuncios por Suscriptor</li>

p.espaciox {
text-indent: 26px;
}

y ...

rikrdomat dijo:
Como puedo ocultarlo en moviles

usarias media jquery para cuando detecte una medida mas 'pequeña' ... y se le cambia el 'espacio' a 0px

@Media only screen and (max-width: 600px) {p.espaciox {text-indent: 0px;}}

*600px : al detectar/reducir 599px hace el cambio
.

rikrdomat · 30 May 2023

Puko dijo:
Si usaste que es el 'normal/en pc' ...

<li>Hasta 2 Anuncios por Suscriptor</li>

p.espaciox {
text-indent: 26px;
}

y ...

usarias media jquery para cuando detecte una medida mas 'pequeña' ... y se le cambia el 'espacio' a 0px

@Media only screen and (max-width: 600px) {p.espaciox {text-indent: 0px;}}

*600px : al detectar/reducir 599px hace el cambio
.

En realidad lo hice directo al html:
<li>Hasta 2 Anuncios por Suscriptor</li> lo que sigo sin saber es cómo agregar el @Media only

Puko · 30 May 2023

rikrdomat dijo:
En realidad lo hice directo al html:

No creo, 'alargaste' el tamaño del div y se 'acomodo' toda la frase
Asi no te puedo estar ayudando si le cambias y me dices otra cosa

rikrdomat · 30 May 2023

Puko dijo:
No creo, 'alargaste' el tamaño del div y se 'acomo' la frase
Asi con no te puedo estar ayudando si le cambias y me dices otra cosa

Ver el archivo adjunto 1025781

Si, lo que pasa es que estoy haciendo pruebas con el elementor, pero en realidad lo que quiero es lo que te comenté más arriba, como no entendí los primeros dos coloqué directo al html y me sirvió, solo que quiero ocultar eso para móviles: <li>Hasta 2 Anuncios por Suscriptor</li>

juanca24691 · 28 Sep 2023

rikrdomat dijo:
Hola, me puede ayudar con el código para alinear un texto, no se si es con sangría espacio o como.

Necesito se vea así:
• Disponible por 1 Mes
• Hasta 2 Anuncios por
suscriptor
• Opciones de Contacto Limitadas
• Soporte Intermedio

Si se fijan la palabra suscriptor pertenece al mismo item de Hasta dos anuncios por...

Pero en mi web no puedo alienarlo.

El código que tengo actualmente es este:
<ul>
<li>Disponible por 1 Mes</li>
<li>Hasta 2 Anuncios por Suscriptor</li>
<li>Opciones de Contacto Limitadas</li>
<li>Soporte Intermedio</li>
</ul>

Agrega márgenes

juanca24691 · 28 Sep 2023

rikrdomat dijo:
Hola, me puede ayudar con el código para alinear un texto, no se si es con sangría espacio o como.

Necesito se vea así:
• Disponible por 1 Mes
• Hasta 2 Anuncios por
suscriptor
• Opciones de Contacto Limitadas
• Soporte Intermedio

Si se fijan la palabra suscriptor pertenece al mismo item de Hasta dos anuncios por...

Pero en mi web no puedo alienarlo.

El código que tengo actualmente es este:
<ul>
<li>Disponible por 1 Mes</li>
<li>Hasta 2 Anuncios por Suscriptor</li>
<li>Opciones de Contacto Limitadas</li>
<li>Soporte Intermedio</li>
</ul>

Tambien por buenas prácticas nunca agregues CSS y Código Javascript en un mismo archivo HTML

Código para alinear y mejorar la visualización del texto

rikrdomat

Adjuntos

BotBeta

rikrdomat

Adjuntos

Puko

Puko

rikrdomat

Puko

rikrdomat

Puko

rikrdomat

juanca24691

juanca24691

Temas similares