Ir para conteúdo

POWERED BY:

Arquivado

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

Carcleo

Menu UL não centraliza

Por , em Desenvolvimento frontend

Recommended Posts

Carcleo    4

Carcleo
Postado

Pessoal, tenho o menu abaixo que é uma lista UL. Mas observo que a UL não está ficando centralizada na página. Esta indo mais para a direita que centralizada. Me ajudem a descobrir o porquê?

 

index.html

 

<!doctype html>
<html lang="pt-br">
 <head>
  <title>Treinando CSS3</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="estilo.css">
 </head>
 <body>
 
  <div id="corpo">
  
    <div id="topo">
 
 <ul id="menuUl">
   <li><a href="#1">Marcador 1</a></li>
   <li><a href="#2">Marcador 2</a></li>
   <li><a href="#3">Marcador 3</a></li>
   <li><a href="#4">Marcador 4</a></li>
   <li><a href="#5">Marcador 5</a></li>
 </ul>
 
 <select id="menuSelect">
   <option value="#">Esolha o link</option>
   <option value="#1">Marcador 1</option>
   <option value="#2">Marcador 2</option>
   <option value="#3">Marcador 3</option>
   <option value="#4">Marcador 4</option>
   <option value="#5">Marcador 5</option>
 </select>
 
    </div>
 
<div id="conteudo">
 
    </div>
 
<div id="rodape">
 
    </div>
 
  </div>
 
 </body>
</html>

 

estilo.css

 

* {
margin: 0 auto;
}
 
#corpo {
width: 80%;
}
 
#menuSelect{ 
   width: 100%;
   height: 30px;
   background: #f60;
   color: #fff;
   display: none;
}
 
#menuUl {
list-style: none;
width: 100%;
height: 30px;
 
}
 
#menuUl li {
float: left;
display: inline;
width: 20%;
background: #000;
height: 30px; 
margin: 0 auto;
}
 
#menuUl li a {
display: block;
width: 100%;
height: 30px;
background: #CCC;
color: #000;
font: 20px Arial;
text-align: center;
text-decoration: none;
}
 
#menuUl li a:hover {
background: #000;
color: #CCC;
}
 
@media only screen and (max-width: 1000px) {
#corpo {
   width: 100%;
    }
 
   #menuUl  {
display: none;
} 
 
#menuSelect {
display: block;
width: 100%;
}
}

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito