Menu com 100% de largura e crescimento automático.
Olá,
Estou criando um menu com 100% de largura dividido em 5 botões, cada um com 20% (totalizando 100% da tela). O problema é que ao aplicar o zoom na página, o menu "quebra" e desce, minha intenção é que o menu cresça na horizontal, assim criando a barra de rolagem.
Segue o código:
<html xmlns="[http://www.w3.org/2015/xhtml](http://www.w3.org/2015/xhtml)" lang="pt-br" xml:lang="pt-br">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title></title>
<style>*{
margin: 0;
padding: 0;
}
.menu{
min-width: 100%;
height: 50px;
text-align: center;
font-size: 100%;
color: #FFF;
font-family: 'Calibri Light';
}.menu div{
min-width: 20%;
height: 50px;
float: left;
font-size: 100%;
}.menu span{
line-height: 50px;
font-size: 100%;
}
.botoes_inicio{
background-color: red;
}
.botoes_equipe{
background-color: yellow;
}
.botoes_servicos{
background-color: pink;
}
.botoes_produtos{
background-color: orange;
}
.botoes_contato{
background-color: green;
}
</style>
</head>
<body>
<div class="menu">
<div class="botoes_inicio"><span>INÍCIO</span></div>
<div class="botoes_equipe"><span>EQUIPE</span></div>
<div class="botoes_servicos"><span>SERVIÇOS</span></div>
<div class="botoes_produtos"><span>PRODUTOS</span></div>
<div class="botoes_contato"><span>CONTATO</span></div>
</div>
</body>
</html>Pensei que a propriedade min-width faria crescer na horizontal. O que estou errando?
Discussão (2)
Carregando comentários...