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!

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:

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