2

Estou estudando flexbox e decidi criar um menu, tudo funciona bem, mas esta ficando com um espaçamento sem eu ter dado, pelo que sei o flex: 1 ocupa todo o espaço, mas não é isso que esta ocorrendo.

Foto do problema: inserir a descrição da imagem aqui

Código: HTML

<ul class="nav">
  <li class="nav-item"><a href="#">Item 1</a></li>
  <li class="nav-item"><a href="#">Item 2</a></li>
  <li class="nav-item"><a href="#">Item 3</a></li>
  <li class="nav-item"><a href="#">Item 4</a></li>
  <li class="nav-item"><a href="#">Item 5</a></li>
</ul>

Código: CSS

.nav {

  background: #ED4343;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;

}
.nav-item {

  flex: 1;
  list-style: none;
  text-align: center;

}

a {

  display: block;
  padding: 20px;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
  text-decoration: none

}

1 Resposta 1

1

Rapaz seu problema é que por default todo elemento <ul> tem um padding! Vc precisa remover esse padding do user-agent na mão, colocando padding:0 na ul de classe .nav

Veja como fica o resultado:

.nav {
	background: #ED4343;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
}

.nav-item {
	flex: 1;
	list-style: none;
	text-align: center;
}

a {
	display: block;
	padding: 20px;
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
	text-decoration: none
}
<ul class="nav">
	<li class="nav-item"><a href="#">Item 1</a></li>
	<li class="nav-item"><a href="#">Item 2</a></li>
	<li class="nav-item"><a href="#">Item 3</a></li>
	<li class="nav-item"><a href="#">Item 4</a></li>
	<li class="nav-item"><a href="#">Item 5</a></li>
</ul>


Veja que na documentação oficial da W3C o UL tem os seguintes atributos por padrão!

ul {
display: block;
list-style-type: disc;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
padding-start: 40px; 
}

Fonte: https://www.w3.org/TR/2012/WD-html-markup-20120329/ul.html#ul-display

Para limpar esses estilos padrão que o user-agente coloca em alguns elementos vc pode usar um Normalizer ou fazer um Reset no CSS, essa resposta tem mais detalhes: CSS Reset ou Normalize?

E sobre o que é o user-agente vc pode ler aqui: O que é User Agent StyleSheets?

3
  • Deu certinho, eu fiquei um pouco surpreso em saber que por default o ul tem um padding, isso porque eu sempre criei menus usando o float e não dava esse espaçamento, mas obrigado, essa informação é bem útil Commented 19/10/2018 às 12:13
  • @PedroSilva da uma olhada nesse link pt.stackoverflow.com/questions/165937/… vc vai ver que por padrão o Browser pode estabelecer alguns CSS basa para a folha de estilo, podem ser ou não diferentes dos sugeridos pela W3C... por isso existem alguns normalizer.css e reset.css para tentar zerar ou igualar o css defaut de todos os browser
    – hugocsl
    Commented 19/10/2018 às 12:15
  • @PedroSilva outro link que vai te interessa a entender melhor o que aconteceu. São leituras que vão te servir pro resto da vida de dev. vale a pena parar um minutinho para ler pt.stackoverflow.com/questions/100044/css-reset-ou-normalize
    – hugocsl
    Commented 19/10/2018 às 12:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .