Eu adicionei um texto personalizado no box central e acabei ficando com três linhas de descrição, o que deixa o box mais alongado... O que devo fazer para deixar todos com o mesmo tamanho?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Eu adicionei um texto personalizado no box central e acabei ficando com três linhas de descrição, o que deixa o box mais alongado... O que devo fazer para deixar todos com o mesmo tamanho?
Olá Nicollas,
Coloque seu código aqui para darmos uma olhada.
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Serviços</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
<main>
<ul class="produtos">
<li>
<h2>Cabelo</h2>
<img src="cabelo.jpg">
<p class="descricao">Na tesoura, máquina ou facão, ao desejo e estilo do cliente</p>
<p class="preco">R$25,00</p>
</li>
<li>
<h2>Barba</h2>
<img src="barba.jpg">
<p class="descricao">Desenho profissional de barba a facão ou a peixeira - para os mais moderados temos navalha... <p>
<p class="preco">R$18,00</p>
</li>
<li>
<h2>Completão</h2>
<img src="cabelo+barba.jpg">
<p class="descricao">Pacote completo - reze para sair vivo!</p>
<p class="preco">35,00</p>
</li>
</ul>
</main>
</body>.caixa{
position: relative;
width: 940px;
margin: 0 auto;}
nav{ position: absolute; top: 110px; right: 0; } nav li{ display: inline; margin-left: 15px ; }
nav a{ text-transform: uppercase; color: black; font-weight: bold; font-size: 22px; text-decoration: none; } .produtos{ width: 940px; margin: 0 auto; padding: 50px 0;
} .produtos li{ display:inline-block; text-align: center; width: 30%; vertical-align: top; background: #cccccc; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box;
} .produtos h2{ font-size: 30px; font-weight: bold; } .descricao{ font-size: 18px; }
.preco{ font-size: 22px; font-weight: bold; margin-top: 10px;
}
`
