Ir para conteúdo

POWERED BY:

Arquivado

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

Fábio BN

Problema com Bordas de Menu Responsivo

Por , em Desenvolvimento frontend

Recommended Posts

Fábio BN    17

Fábio BN
Postado

Oi Pessoal.

 

Fiz um menu responsivo, e estou tendo problemas com as bordas, elas estão escapando para direita quando tem a quebra de linha. Já tentei alterar algumas configurações de CSS mas nenhuma delas teve sucesso.

 

Segue o código e uma imagem do problema:

CSS:

*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration:none;
}

body {
	font: 16px san-serif;
}

.menu {
		width: 90%;
		max-width: 980px;
		margin: 20px auto;
		background: orange;
		border-radius: 5px;
		text-align: center;
		display: table;

}		
		.menu ul li { display: inline; }
		
		.menu ul li a{
		color: #fff;
		display: inline-block;
		padding: 10px;
		border-right: 1px solid #fff;


}
      /* Tira última dorda do Menu */
		.menu ul li:last-child a{
		border-right: 0;
		 /* Tira última dorda do Menu */

}
 /* Se Resolução for no máximo ( px ), faça */
 @media ( max-width: 768px )  {
		.menu ul li  {
		width: 50%;
		float: left;
		
	
	
      }

		.menu ul li a{
		width: 100%;
		border-bottom: 1px solid #fff;
		border-left: 0;

         }
		 

}



@media ( max-width: 480px )  {
		.menu ul li {
		width: 100%
		}
}


HTML:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Teste</title>
<!-- Bootstrap -->
<link href="../css/css.css" rel="stylesheet" type="text/css">



</head>
<body style="background:#eee;">
 <!-- Inicio Menu -->
 <nav class="menu" >
  	<ul>
                <li><a href="#" title="">Home</a></li>
				<li><a href="#" title="">Quem Somos</a></li>
				<li><a href="#" title="">Política</a></li>
				<li><a href="#" title="">Portifólio</a></li>
				<li><a href="#" title="">Equipe</a></li>
				<li><a href="#" title="">Contato</a></li>
 	</ul>

</nav>
</body>
</html>

Foto:

problema_menu.jpgSe alguém puder ajudar, pois passei horas tentando resolver sem sucesso.
Onde eu indiquei com as setas, estão aparecendo as linhas brancas ultrapassando a borda do menu.

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Electronic    124

Electronic
Postado

Isso por causa do padding

adicione box-sizing, neste seletor

.menu ul li a {
    color: #FFF;
    border-right: 1px solid #FFF;
    padding: 10px;
    display: inline-block;
    box-sizing: border-box;  /*<<<<*/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fábio BN    17

Fábio BN
Postado

Oi Electronic.

 

Obrigado pela sua ajuda, agora funcionou.

Agradeço a sua ajuda, e a ajuda de todos deste Fórum que é o melhor do ramo no Brasil.

Abraços!

 

Fábio!

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