Porque fazer uma classe "produtos" ao invés de usar "main li" em teste deu o mesmo resultado.
}
.produtos li {
display: inline-block;
}
Teste que chegou no mesmo resultado
}
main 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
Porque fazer uma classe "produtos" ao invés de usar "main li" em teste deu o mesmo resultado.
}
.produtos li {
display: inline-block;
}
Teste que chegou no mesmo resultado
}
main li {
display: inline-block;
}
O resultado é o mesmo. Mas não é uma boa prática aplicar estilos diretamente nas tags do html.
Pense o seguinte: E se na mesma página você tiver uma lista de produtos, preços e benefícios? No segundo exemplo você aplicará a estilização para todas as li na página. E se mesmo assim todas as listas tiverem a mesma estilização, fica difícil a manutenção. Agora veja outro cenário:
HTML:
<ul class="produtos">
<li class="produtos__item">Produto</li>
</ul>
<ul class="beneficios">
<li class="beneficios__item">Beneficio</li>
</ul>
<ul class="precos">
<li class="precos__item">Preço</li>
</ul>CSS:
.produtos, .beneficios, .precos {
display: flex;
}Se chegar em algum momento, e eu não quiser mais que a lista de produtos tenha o display flex basta buscar pela classe, entende?
Olá Rodrigo!!
Muito obrigado pela explicação, salvando de novo ahhaa parabéns pela proatividade no fórum.