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
Código (HTML):
estilo.css
Código (CSS):
index.html
Código (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>
<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
Código (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%;
}
}
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%;
}
}