Olá pessoal, não entendi porque não funciona o "display: inline-block" quando coloco somente a classe.
.icones-sociais { display: inline-block; }
Mas funciona quando coloco a classe e a tag li
.icones-sociais li { display: inline-block; }
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá pessoal, não entendi porque não funciona o "display: inline-block" quando coloco somente a classe.
.icones-sociais { display: inline-block; }
Mas funciona quando coloco a classe e a tag li
.icones-sociais li { display: inline-block; }
É o seguinte o elemento que deve herdar a propriedade "display: inline-block;" é o li dentro do elemento com a classe ".icones-sociais". Se você usa apenas ".icones-sociais { display: inline-block; }" esse comportamento vai ser associado apenas aos elementos que possuem essa classe.
Espero ter sido claro.
Só complementando o que o alfredo disse:
Talvez sua estrutura deve estar semelhante a esta:
<ul class="icones-sociais">
<li> Facebook </li>
<li> Twitter </li>
<li> Instagram </li>
</ul>Quando você aplica ".icones-sociais { display: inline-block; } " você acaba mudando a forma em que o elemento <ul> é exibido no navegador para bloco em linha, e como a exibição dos elementos <li> por padrão é block eles continuam sendo exibido da mesma maneira (em blocos), por conta da regra não ter sido aplicada diretamente a eles.
Espero ter complementado a resposta, abraço!
Valeu pessoal, ajudou bastante!