1
<!--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;
    }
2
  • Wellington poste seu HTML para ficar mais facil de alguém te ajudar. 13/02/2019 às 17:14
  • você quer botar a imagem ao lado do texto é isso? 13/02/2019 às 17:20

2 Respostas 2

2

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>

inserir a descrição da imagem aqui

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>

1

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .