<!--Painel de produtos-->
<div class="container paineis">
<section class="painel novidades">
<h2>Novidades</h2>
<ol>
<li>
<a href="produto1.html">
<figure>
<img src="img/produtos/miniatura1.png" alt="miniatura1">
<figcaption>Fuzz Cardigan por 199,90</figcaption>
</figure>
</a>
</li>
</ol>
<ol>
<li>
<a href="produto2.html">
<figure>
<img src="img/produtos/miniatura2.png" alt="miniatura2">
<figcaption>Fuzz Cardigan por 99,90</figcaption>
</figure>
</a>
</li>
</ol>
<ol>
<li>
<a href="produto3.html">
<figure>
<img src="img/produtos/miniatura3.png" alt="miniatura3">
<figcaption>Fuzz Cardigan por 56,90</figcaption>
</figure>
</a>
</li>
</ol>
<ol>
<li>
<a href="produto4.html">
<figure>
<img src="img/produtos/miniatura4.png" alt="miniatura4">
<figcaption>Fuzz Cardigan por 69,90</figcaption>
</figure>
</a>
</li>
</ol>
<ol>
<li>
<a href="produto5.html">
<figure>
<img src="img/produtos/miniatura5.png" alt="miniatura5">
<figcaption>Fuzz Cardigan por 14,90</figcaption>
</figure>
</a>
</li>
</ol>
<ol>
<li>
<a href="produto6.html">
<figure>
<img src="img/produtos/miniatura6.png" alt="miniatura6">
<figcaption>Fuzz Cardigan por 62,90</figcaption>
</figure>
</a>
</li>
</ol>
</section>
.painel li {
display: inline-block;
vertical-align: top;
width: 140px;
margin: 2px;
padding-bottom: 10px;
}
.painel h2 {
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 10px;
}
.painel a {
color: #333;
font-size: 14px;
text-align: center;
text-decoration: none;
}
.novidades {
background-color: #F5DCDC;
}
.mais-vendidos {
background-color: #DCDCF5;
}
-
Wellington poste seu HTML para ficar mais facil de alguém te ajudar.– OtavioCapelCommented 13/02/2019 às 17:14
-
você quer botar a imagem ao lado do texto é isso?– Marcos Vinicius LeãoCommented 13/02/2019 às 17:20
Adicione um comentário
|
2 Respostas
Seu problema é que vc abriu várias <ol>
com apenas um <li>
dentro...
Isso não é uma boa prática:
<ol>
<li>
item 1
</li>
</ol>
<ol>
<li>
item 2
</li>
</ol>
O correto seria
<ol>
<li>
item 1
</li>
<li>
item 2
</li>
</ol>
Veja que o user-agent
por default coloca display:block
na <ol>
E como um elemento do tipo block
ocupa 100% da linha acaba que a cada <ol></ol>
que vc abre e fecha faz com que a próxima <ol></ol>
sempre comece na linha de baixo
Logo apenas de remover esses <ol>
extras do seu HTML já resolveu, nem precisou mexer no CSS já que seu .painel li {display: inline-block;
já estava configurado para ficar inline
.
.painel li {
display: inline-block;
vertical-align: top;
width: 140px;
margin: 2px;
padding-bottom: 10px;
}
.painel h2 {
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 10px;
}
.painel a {
color: #333;
font-size: 14px;
text-align: center;
text-decoration: none;
}
.novidades {
background-color: #F5DCDC;
}
.mais-vendidos {
background-color: #DCDCF5;
}
<!--Painel de produtos-->
<div class="container paineis">
<section class="painel novidades">
<h2>Novidades</h2>
<ol>
<li>
<a href="produto1.html">
<figure>
<img src="img/produtos/miniatura1.png" alt="miniatura1">
<figcaption>Fuzz Cardigan por 199,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto2.html">
<figure>
<img src="img/produtos/miniatura2.png" alt="miniatura2">
<figcaption>Fuzz Cardigan por 99,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto3.html">
<figure>
<img src="img/produtos/miniatura3.png" alt="miniatura3">
<figcaption>Fuzz Cardigan por 56,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto4.html">
<figure>
<img src="img/produtos/miniatura4.png" alt="miniatura4">
<figcaption>Fuzz Cardigan por 69,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto5.html">
<figure>
<img src="img/produtos/miniatura5.png" alt="miniatura5">
<figcaption>Fuzz Cardigan por 14,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto6.html">
<figure>
<img src="img/produtos/miniatura6.png" alt="miniatura6">
<figcaption>Fuzz Cardigan por 62,90</figcaption>
</figure>
</a>
</li>
</ol>
</section>
Basta adicionar o inline-block
no elemento <ol>
.painel li {
display: inline-block;
vertical-align: top;
width: 140px;
margin: 2px;
padding-bottom: 10px;
}
.painel h2 {
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 10px;
}
.painel a {
color: #333;
font-size: 14px;
text-align: center;
text-decoration: none;
}
.novidades {
background-color: #F5DCDC;
}
.mais-vendidos {
background-color: #DCDCF5;
}
ol{
display: inline-block;
}
<!--Painel de produtos-->
<div class="container paineis">
<section class="painel novidades">
<h2>Novidades</h2>
<ol>
<li>
<a href="produto1.html">
<figure>
<img src="img/produtos/miniatura1.png" alt="miniatura1">
<figcaption>Fuzz Cardigan por 199,90</figcaption>
</figure>
</a>
</li>
</ol>
<ol>
<li>
<a href="produto2.html">
<figure>
<img src="img/produtos/miniatura2.png" alt="miniatura2">
<figcaption>Fuzz Cardigan por 99,90</figcaption>
</figure>
</a>
</li>
</ol>
<ol>
<li>
<a href="produto3.html">
<figure>
<img src="img/produtos/miniatura3.png" alt="miniatura3">
<figcaption>Fuzz Cardigan por 56,90</figcaption>
</figure>
</a>
</li>
</ol>
<ol>
<li>
<a href="produto4.html">
<figure>
<img src="img/produtos/miniatura4.png" alt="miniatura4">
<figcaption>Fuzz Cardigan por 69,90</figcaption>
</figure>
</a>
</li>
</ol>
<ol>
<li>
<a href="produto5.html">
<figure>
<img src="img/produtos/miniatura5.png" alt="miniatura5">
<figcaption>Fuzz Cardigan por 14,90</figcaption>
</figure>
</a>
</li>
</ol>
<ol>
<li>
<a href="produto6.html">
<figure>
<img src="img/produtos/miniatura6.png" alt="miniatura6">
<figcaption>Fuzz Cardigan por 62,90</figcaption>
</figure>
</a>
</li>
</ol>
</section>