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