[Dúvida] - Criando Menu Horizontal

[Professor Kaíque Luan 0]

Boa Noite meus queridos !

 

Me encontrei em uma dúvida meio que besta mais como acredito que não existe dúvidas bestas estou criando este tópico.

 

Agradeço a todos que poderem estar compartilhando vossos conhecimentos.

 

Eu crio Menus Horizontais da seguinte forma.

 

Html

<nav id="menu">
	<ul>
    	<li> <a href="#">Home</a></li>
        <li> <a href="#">Produtos</a></li>
        <li> <a href="#">Serviços</a></li>
        <li> <a href="#">Contato</a></li>
    
    </ul>


</nav>

CSS

#menu{
	width:100%;
	background-color:#111;
	padding:18px 8%;
		
}	

#menu ul{
     list-style:none;
  }

  #menu li{
     display:inline;	
  }

Mais hoje eu vi um colega meu fazendo da seguinte maneira, o HTML continua o mesmo nos dois casos o que muda é o CSS.

 

CSS

#menu{
	width:100%;
	float:left;
	background-color:#111;
	padding:18px 8%;
		
	
}	

#menu ul{
  list-style:none;

}
#menu li{
	float:left;
}

Minha dúvida está no #menu li {float:left;} & #menu li{display:inline;}

 

 

A única diferença que notei foi que no display:inline; Temos um espaçamento esquerdo padrão e com o float:left; não ocorre o mesmo.

Seria só isso?

 

Acredito que com o float:left; teriamos mais controle sobre as lista em relação ao espaçamento.

 

Te mais alguma diferença? em relação a boas práticas, o que é recomendado?

 

 

 

[L. Henrique 179]

Indiferente de qual você usa para layout, todos os métodos como float, inline, inline-block ou table-cell estarão corretos e dentro da semântica o CSS. Mas vou explicar todos eles pra te deixar a par da situação.

/* float: left; */

Esse método, na verdade, não serve pra muita coisa já que o conceito dele dentro do CSS é muito fraco, mal feito e você vai precisar de códigos adicionais para ajeitar tudo depois (o famoso markup cleaning method). Ele só serve pra arrastar e deixar flutuando as coisas em uma certa parte da tela, mas podem causar alguns problemas como a inversão da ordem da lista (trazer o último item para o primeiro lugar). Lembrando que ele não funciona em IE6/IE7.

 

/* display: inline; */

Bem, esse também é um método não muito bom, mas serve, porém não foi feito para criação de layouts. Realmente só é 100% funcional quando adicionado um inline seguido de um zoom: 1; para o total funcionamento em IE6/IE7.

Lembrando que nessa lista ainda temos o inline-block e o table-cell, mas o inline-block vai tratar qualquer quebra de linha do HTML como um white-space (por isso os espaçamentos quando os elementos viram inline).

Todos os métodos são válidos e funcionam muito bem. O mais popular, de fato, é o inline-block (por conta do seu funcionamento cross-browser), já que alguns navegadores possam não suportar o float.

[Professor Kaíque Luan 0]

Entendi, muito obrigado.

L. Henrique