1
resposta

Inline e Block+line nao funcionam como esperado

Ola! Apos a parte 2 do curso de CSS HTML, segui a sugestao do professor e fui tentar aplicar o cabecalho e rodape da pagina 'produtos.html' na 'index.html'. Realmente ela perdeu muito da formatacao. Sera que foi porque eu inclui o link para a reset.css (antes da style.css)? De toda forma, para os links 'Home, Produtos e Contato' do cabecalho, a propriedade inline parece nao funcionar, porque os links nao alinham lado a lado. Como corrigir?

header{
    background: #BBBBBB;
    padding:  20px 0;
    border: 2px solid #000000;
}

.tituloPrincipal{
    color: #000000;
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 20px;
}

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

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

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

nav a:hover{
    color: #F33A9B;
    text-decoration: underline;
}
1 resposta

Fala ai Carolina, tudo bem? Era para eles estarem alinhas lado à lado, você definiu o display: inline nos li's.

Verifique se os mesmos estão recebendo de fato o display: inline, ou seja, verifique se essa regra está sendo aplicada nos li's.

Isso pode ser verificado através da ferramenta de desenvolvedor do Chrome.

Espero ter ajudado.