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

display: inline não funciona para juntar imagem com o menu

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Posicionamento dos elementos e atividade Posicionamento

por Claudia Caroline Arruda Policarpo
| 40.2k xp | 8 posts

Bom Dia

Fiz um teste tentando colocar na mesma linha a imagem com o menu utilizando o diplay, mas não entendi porq não funcionou. Simulei colocando vários h1 em sequencia e dá certo.

Abaixo meu código em html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Produtos - Barbearia Alura</title>
                <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="produtos.css">
    </head>
    <body>
        <header>
            <h1><img src="Imagens/logo.png"></h1>

            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>                
            </nav>

        </header>
    </body>
</html>

meu código css

header{
    background:#bbbbbb
}

nav li{
    display: inline;
    margin: 0 0 0 15px; /*topo direita baixo esquerda*/
}

nav a{
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none; /*tira sublinhado do texto*/    
}

h1{
    display: inline;
}

img{
    display: inline;
}
2 respostas
por Evelyn Carolina Leite Silva
| 27.3k xp | 1 posts

Oi Claudia, isso aconteceu comigo e resolvi assim: criei uma nova class no HTML ul de beneficios

            <div class="beneficios">
                <h3 class="texto-centralizado">Benefícios</h3>

                <ul class="beneficios-itens"> **<!--essa class aqui-->**
                    <li class="itens">Atendimento ao cliente</li>
                    <li class="itens">Espaço diferenciado</li>
                    <li class="itens">Localização</li>
                    <li class="itens">Profissionais qualidicados</li>
                </ul>

                <img src="site/beneficios.jpg" class="imagembeneficios">

            </div>

Depois eu alterei no CSS 

.beneficios-itens {
    display: inline-block;
    vertical-align: top;
    width: 20px;
    margin-right: 30%;
}

Depois segui com o que o professor ensinou!

Abraços

solução!
por Tálison Miguel Amancio
| 122.1k xp | 90 posts

Olá Claudia, vamos lá em dois steps:

1 - Seu problema

Existe algo chamado Box Model, que sugiro dar uma pesquisada. É sobre como os elementos se comportam, como a "caixa invisível" ao redor deles se comporta. Elementos block, inline e inline-block tem características que pode ficar um pouco longo se explicar aqui. Então dá uma olhadinha nesse site: https://pt-br.learnlayout.com/

2 - Uma solução

  • Apague seu css de display: inline para h1 e img
  • Depois
    header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
}

O display: flex; vai fazer com que os elementos filhos distribuam o espaço um do lado do outro;

O align-items: center; vai centralizar na vertical;

O justify-content: space-between; fará com que todo espaço restante ao redor dos itens fique entre eles, desta forma mandando o conteúdo para as laterais.

E por fim, o padding: 0 2rem; é só para não grudar nas laterais, pra dar um charme no nosso layout.

Caso não saiba o que é rem, é apenas uma unidade de medida baseada na fonte padrão do navegador, que se não for modificado é 16px, como coloquei 2rem isso quer dizer 2 x 16px, ou seja 32px;