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