1
resposta

Ícones embaixo do outro, duvida no CSS

Então, estava com essa dúvida do porque, mesmo com o código desse jeito:

.redes a {

    display: inline-block;
    width: 40px;
    height: 40px;
    text-indent: -9999px;

}

.github {

    background-image: url(github.png);
}

.twitter {

    background-image: url(twitter.png);

}

.linkedin {

    background-image: url(linkedin.png);

}

Os ícones ainda assim estavam empilhados, li esse fórum e percebi que faltava colocar isso aqui para funcionar:

.redes li {

    display: inline-block;
}

Minha pergunta é: Porque eu preciso fazer isso? Se eu estou especificando que eu quero que a classe "redes" "a" receba o display inline-block, pra que eu preciso especificar que o "li" dentro do "redes" também precisa?

E porque eu não posso simplesmente usar .redes para definir isso tudo? Tipo:

.redes  {

    display: inline-block;
    width: 40px;
    height: 40px;
    text-indent: -9999px;

}

Não deveria funcionar?

1 resposta

Fala aí Victor, tudo bem? Bom, vamos lá:

Se você definir os .redes a como inline-block isso irá funcionar apenas dentro do li, exemplo:

<ul class="redes">
    <li>
        <a>Meu link</a>
        <a>Meu link</a>
        <a>Meu link</a>
    </li>
</ul>

Todos os link's irão ficar lado á lado (por default já ficaria, pois a tag a é inline por padrão). Mas, se definirmos como block:

.redes a {
    display: block;
}

Ai, agora os link's irão ficar um embaixo do outro, mas, repare que tudo isso está acontecendo dentro do li.

No caso do seu cenário, você precisa que os itens de lista estejam inline (no caso o li), por isso, que devemos aplicar o css diretamente para o li:

.redes li {
    display: inline-block;
}

Espero ter ajudado.