1

Boa tarde pessoal!

Estou querendo alinhar uma lista ul de forma que seus li fiquem a esquerda e o último li fique a direita. Não estou conseguindo fazer isso, alguém poderia me ajudar.

Eu poderia fazer isso de forma mais fácil se eu separasse essa li dessa ul mas eu queria manter junto.

Tentei pôr o justify-self diretamente no úlimo também mas não deu Eu tentei conforme segue abaixo e não deu certo:

HTML

 <ul class="lista-menu">
    <a><li class="funcionarios">Funcionários</li></a>
    <a href="clientes.html"><li class="clientes">Clientes</li></a>
    <a href="produtos.html"><li class="produtos">Produtos</li></a>
    <a href="servicos.html"><li class="servicos">Serviços</li></a>
    <a><li class="financeiro">Financeiro</li></a>
 </ul>

CSS

.lista-menu {
display: flex;
justify-content: flex-start;
width: 100%;
border: 1px solid black;
}

.financeiro {
  justify-self: flex-end;
}

1 Resposta 1

2

Seu HTML tem um erro de semântica que vc precisa corrigir, o filho direto da <ul> tem que ser a <li> e não o <a>

Depois, no CSS, usando Flexbox, para vc alinha no eixo X um filho de um conteiner flex, se usa margin e não justyfy

Repare abaixo, que ao colocar margin-left: auto no último filho ele vai colar na direita do container pai

inserir a descrição da imagem aqui

.lista-menu {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  border: 1px solid black;
  
  padding: 0;
}

.financeiro {
  margin-left: auto;
}
<ul class="lista-menu">
  <li class="funcionarios"><a>Funcionários</a></li>
  <li class="clientes"><a href="clientes.html">Clientes</a></li>
  <li class="produtos"><a href="produtos.html">Produtos</a></li>
  <li class="servicos"><a href="servicos.html">Serviços</a></li>
  <li class="financeiro"><a>Financeiro</a></li>
</ul>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .