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; }
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!