Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Ex. 1 Aula 8 - Mais seletores

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

3 respostas

É 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.

solução!

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!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software