Eu entendi que a diferença é que no inline-block, é possivel alterar o heigth e o width. Mas por que não funciona o inline?? eu coloco só inline no codigo e as "li" não se alinham". pq?????
Eu entendi que a diferença é que no inline-block, é possivel alterar o heigth e o width. Mas por que não funciona o inline?? eu coloco só inline no codigo e as "li" não se alinham". pq?????
hoje, com a Alura e o Google Gemini
Fala Lucca!
Tanto o display: inline; quanto o display: inline-block; permitem que uma tag não necessite de uma quebra de linha para se posicionar no HTML, ficando, como o próprio nome já diz, na mesma linha.
A diferença do inline-block, como você disse, é apenas permitir que um elemento possa ter sua altura e largura modificadas.
Se você quiser que os elementos de uma lista fiquem agrupados verticalmente, basta adicionar um display: block; a elas.
Segue um exemplo com as diferenças:
display: inline;
<ul>
<li style="display: inline;">Menu</li>
<li style="display: inline;">Produtos</li>
<li style="display: inline;">Login</li>
</ul>Resultado:
Menu Produtos Login
display: inline-block;
<ul>
<li style="display: inline-block;">Menu</li>
<li style="display: inline-block;">Produtos</li>
<li style="display: inline-block;">Login</li>
</ul>Resultado:
Menu Produtos Login
display: block;
<ul>
<li style="display: block;">Menu</li>
<li style="display: block;">Produtos</li>
<li style="display: block;">Login</li>
</ul>Resultado: