Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

×

Informação importante

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