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

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>

Hacer clic para expandir...

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

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

Hacer clic para expandir...

Puko dijo:

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

Hacer clic para expandir...

rikrdomat dijo:

solo quiero hacerla en la versión desktop,

Hacer clic para expandir...

rikrdomat dijo:

Como puedo ocultarlo en moviles

Hacer clic para expandir...

Puko dijo:

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
.

Hacer clic para expandir...

rikrdomat dijo:

En realidad lo hice directo al html:

Hacer clic para expandir...

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

Hacer clic para expandir...

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>

Hacer clic para expandir...

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>

Hacer clic para expandir...