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

[rikrdomat]

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]

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:

<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]

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:

<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.

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]

'parte' la frase en dos ...

Hasta 3 Anuncios por<br>
Suscriptor

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

<li>
Hasta 3 Anuncios por<br>
<p class="iii"> Suscriptor</p>
</li>


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

Previo...

 

[Puko]

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

<li>Hasta 2 Anuncios por <p class="espaciox">Suscriptor</p></li>

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

O directo al html ...

<li>Hasta 2 Anuncios por <p style="text-indent: 28px;">Suscriptor</p></li>

previo...

 

[rikrdomat]

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

<li>Hasta 2 Anuncios por <p class="espaciox">Suscriptor</p></li>

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

O directo al html ...

<li>Hasta 2 Anuncios por <p style="text-indent: 28px;">Suscriptor</p></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]

solo quiero hacerla en la versión desktop,

Si usaste <p class="espaciox"> que es el 'normal/en pc' ...

<li>Hasta 2 Anuncios por <p class="espaciox">Suscriptor</p></li>

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

y ...

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]

Si usaste <p class="espaciox"> que es el 'normal/en pc' ...

<li>Hasta 2 Anuncios por <p class="espaciox">Suscriptor</p></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 <p style="text-indent: 28px;">Suscriptor</p></li> lo que sigo sin saber es cómo agregar el @Media only

 

[Puko]

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]

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 <p style="text-indent: 28px;">Suscriptor</p></li>

 

[juanca24691]

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]

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