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

Dúvida no Ex. 7 da Aula 6 - Posicionamento de elementos

Referente ao curso HTML e CSS: Os seus primeiros passos, no capítulo Posicionamento de elementos e atividade Cor de fundo dos itens de menu

por Edson Rodrigues
| 156.5k xp | 15 posts

Ao aplicar este estilo a pagina:

nav{
    float: left;
    width: 200px;
    background-color: #C7BE9B;
}

Tenho um resultado que é a lista de links uma abaixo do outro como o esperado pelo exercício proposto: Exemplo:

Mousse de maracujá Pavê Pudim Torta de morango

......

Agora se plicar este:

nav ul li{
    float: left;
    width: 200px;
    background-color: #C7BE9B;
}

estilo especificando o ul e li a lista assume outro comportamento ficando em lista, mas não tenho declarado a tag "display: inline".

Por que isto acontece?

2 respostas
por Ramon Pacheco
| 490.5k xp | 249 posts
Moderador

Olá Edson,

Porque no primeiro exemplo todo o bloco nav flutua a esquerda.

Já no segundo exemplo você foi mais especifico, descendo na estrutura das tags fazendo com que cada li flutue a esquerda.

Att,

solução!
por Renan Sampaio Lopes
| 256.1k xp | 102 posts
Moderador

Olá Edson tudo bem?

Vamos lá, o float faz o objeto flutuar na pagina é uma propriedade de posicionamento e você está aplicando o "float: left;" em ambos os blocos, porém quando está aplicando no bloco "nav" ele posiciona o bloco como inteiro e nossos li's continuam com sua propriedade preservada como padrão,

caso 1:

nav{
    float: left; 
    width: 200px;
    background-color: #C7BE9B;
 }

Quando aplicamos no bloco "nav ul li" todos os nossos li's que assumem a propriedade de posicionamento float passada,

caso 2:

nav ul li{
    float: left; 
    width: 200px;
    background-color: #C7BE9B;
 }

Então no segundo caso que está sendo aplicado o posicionamento float nos nossos li's, assim eles assumem este comportamente ficando um ao lado do outro,

Atenciosamente,