0

Senhores, ótimo dia, Por favor, estou trabalhando em um projeto particular, e indo aos pouco criando a página. Quero colocar os lis para a direita, porém com esse codígo não consigo, as documentações dizem que funcionária, mas ainda não achei a solução. Como poderia proceder?

Esse é o html e css:


    <nav class="content">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Sobre</a></li>
            <li><a href="#">Contato</a></li>
        </ul>

        </div> 
.content ul {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    
    display: inline-flex;
   
}
content ul li {
    list-style-type: none;

    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: baseline;
    align-content: flex-end;
    
    margin: 0 1em;
    
}

1 Resposta 1

1

Primeiro, nessa classe faltou o "." content ul li { deveria ser .content ul li { e ainda tem uma div de fechamento no meio do código </div>, me parecei desnecessária...

Depois vc está colocando estilos de alinhamento de container que deveria estar no PAI no FILHO, ai não da certo mesmo... e vc ainda usou estilos de align para alinha no eixo X, mas no eixo X se alinha com margin ou justify

Bom, existe mais de uma opção para fazer esse alinhamento, mas aqui tem uma sugestão. Tudo que era desnecessário no seu CSS eu deixei comentado

.content ul {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;

  /* display: inline-flex; */
  display: flex;
  justify-content: flex-end;

}

.content ul li {
  list-style-type: none;

  /* flex-direction: row; */
  /* flex-wrap: nowrap; */
  /* justify-content: flex-end; */
  /* align-items: baseline; */
  /* align-content: flex-end; */

  margin: 0 1em;

}
<nav class="content">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Contato</a></li>
  </ul>
</nav>

2
  • Caramba Muito obrigado. A div foi sem querer no código desculpe, é bem mais simples do que a forma tentei. Agradeço a ajuda. 22/06/2020 às 21:04
  • @AlbertyLucas sem problemas meu caro, as coisas com CSS costumam ser mais simples do que a gente pensa...
    – hugocsl
    22/06/2020 às 21:34

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 .