CSS HTML

HTML: Como alinhar texto a direita em uma lista

10 de junho de 2020

HTML: Como alinhar texto a direita em uma lista

Neste artigo você vai aprender como alinhar texto a direita em uma lista, apenas utilizando CSS, para poder customizar as listas dos seus projetos web!

alinhar texto a direita capa

Fala programador(a), tudo bem? Bora aprender coisa nova!

Por comportamento default as listas do HTML vem alinhadas a esquerda, e eventualmente precisamos delas alinhadas a direita

E isso pode ser facilmente resolvido com a propriedade de text-align, com o valor de right

A mesma propriedade que alinhamos os textos

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Vamos a um exemplo prático:

<!DOCTYPE html>
<html>
<head>
    <title>Como alinhar texto a direita em uma lista</title>
    <meta charset="utf-8">
</head>
<body>
    <ul>
        <li>Esta</li>
        <li>lista</li>
        <li>deve</li>
        <li>ser</li>
        <li>alinhada</li>
        <li>a</li>
        <li>direita.</li>
    </ul>
</body>
</html>

Agora vamos ao CSS necessário para alinhar a direita a lista:

alinhar lista a direita ex1

Pronto, desta maneira a lista estará a direita 😀

Você pode tirar também os bullets, com list-style e o valor de none

E é claro, limitar a largura para que atenda o seu layout

Note que alguns elementos do HTML se beneficiam do text-align para alinhar a alguma posição

Como por exemplo, se quisermos centralizar algum texto, devemos adicionar o valor center

Que consequentemente irá servir para as listas

E é claro, cabem os testes também, programação (ou front-end) é isso: testar, testar e testar

Depois se escolhe a melhor opção para o seu caso específico

Conclusão

Neste artigo aprendemos como alinhar texto a direita em uma lista

Utilizamos a propriedade que normalmente alinha textos, a text-align, com o valor de right (direita)

E com isso concluímos nosso objetivo, claro que agora você deve adaptar os estilos do seu projeto para que a lista atenda o layout

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x