Ir para conteúdo
Ruy Hoffmann

Menu horizontal alinhado a esquerda com uma opção apenas a direita

Recommended Posts

Olá pessoal, boa tarde,

 

Primeiro dizer que essa é minha primeira postagem e sou novato em html5, então desculpe se perguntar algo muito leigo rsrs....

 

Tenho um Menu Horizontal como no código abaixo utilizando o NAV que todas as opções ficam alinhadas a esquerda. Mas quero apenas a Opção "LOGIN" vá para a direita mantendo-se na mesma linha e não sei como fazer

.

Vocês poderiam me ajudar por favor?

 

Arquivo index.html:
<nav>
<ul>
    <li><a href="Index.html">Início</a></li>        
    <li><a href="Jogos.html">Jogos</a></li>
    <li><a href="Cadastro.html">Cadastro</a></li>
    <li><a href="Contato.html">Contato</a></li>
    <li><a href="Login.html">Login</a></li>
</ul>
</nav>


Arquivo style.css:
nav
{
    background-color:#003399;
    height:45px;
    font-size:25px;
}
nav ul
{    
    height:auto;
    padding:8px 0px;
    margin:0px;
}
nav li
{
    display:inline;
    padding:10px;
    margin:0px;
}
nav a
{
    text-decoration:none;
    color:#CC9900;
    padding:8px 8px 8px 8px;
}
nav a:hover
{
    color:#CCFFFF;
    background-color:#666666;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Fui cirúrgico e alterei poucas coisas no seu css usando o flexbox:

 

nav
{
  background-color:#003399;
  height:45px;
  font-size:25px;
  display: flex;
}
nav ul
{    
  height:auto;
  padding:8px 0px;
  margin:0px;
  display: flex;
  flex: 1;
}
nav li
{
  display:inline;
  padding:0 10px;
  margin:0px;
}
nav li:last-child
{
  display: flex;
  flex: 1;
  justify-content: flex-end;
}
nav a
{
  text-decoration:none;
  color:#CC9900;
  padding:0px 8px 0px 8px;
}
nav a:hover
{
  color:#CCFFFF;
  background-color:#666666;
}

link JsBin: https://jsbin.com/joxuxixoza/1/edit?css,output

Screenshot 2019-02-03 10.24.46.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.