Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Os 3 elementos: cabelo, barba, cabelo + barba não ficam alinhados

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo A tag section e atividade Reforçando o inline-block

por Anne
| 49k xp | 4 posts

o "cabelo + barba" "cai" após a adição da largura e margem na classe produtos. alguém poderia me ajudar, por favor? o que pode ser?

header {
        background: #BBBBBB;
        padding: 20px 0;}

.caixa {
    position: relative;
    width: 940px;
    margin: 0 auto;}

nav { 
    position: absolute;
    top: 110px;
    right: 0; 
     }

nav li{ 
    display: inline; 
    margin: 0 0 0 15px;}

nav a{
    text-transform: uppercase;
    color: #000000; 
    font-weight: bold; 
    font-size: 22px; 
    text-decoration: none; }

.produtos{ width: 940px;
        margin: 0 auto;
        }


.produtos li {display: inline-block;}
3 respostas
por Victória César
| 93.4k xp | 47 posts

Oi Anne tudo bom? Talvez esteja faltando a propriedade box-sizing: border-box; no produtos li {} tenta colocar:

.produtos li { display: inline-block; width: 30%; box-sizing: border-box; }

O width vai ajustar a largura dos 3 elementos de barba, cabelo, cabelo+barba pra ficarem alinhados e com mesmo tamanho, se não for isso não sei rs

solução!
por Anne
| 49k xp | 4 posts

Oi,

obrigada pela ajuda!

Veja só: já tinha seguido adiante com a lição e adicionado essa propriedade, mais ainda assim continuava apresentando o erro. Decidi abrir o exemplo do professor no meu navegador e deu o mesmo problema. Aí percebi que não era meu código e decidi trocar de navegador (do Firefox para o Chrome). Ambos - o meu e o do professor - funcionaram como nas aulas. Agora não sei dizer qual o problema com o Firefox. Já aconteceu com você? Tem alguma noção do que pode ser?

por Estudante
| 94k xp | 6 posts

Olá, Anne!

Também uso o Firefox e tenho o mesmo problema que você, mas não sei os motivos.