0

Tenho o seguinte trecho de código, mas todos os elementos vem um em baixo do outro, gostaria que eles viesse um ao lado do outro, é possível sem ter que mexe na posição de cada elemento separadamente?

 <div class="back">
                    <p class="p3">10</p>
                    <p class="p3">20</p>
                    <p class="p3">30</p>
                    <p class="p3">40</p>
                    <p class="p3">50</p>
                    <p class="p3">60</p>
                    <p class="p3">70</p>
                    <p class="p3">80</p>
                    <p class="p3">90</p>
                    <p class="p3">100</p>
                    <p class="p3">110</p>
                    <p class="p3">120</p>
                    <p class="p3">130</p>
                </div>

1 Resposta 1

2

Elementos <p> são por padrão em bloco (estilo do user agent usa display: block;), então basta trocar por ou outro elemento que seja inline, como <span>, algo como:

 <div class="back">
    <span class="p3">10</span>
    <span class="p3">20</span>
    <span class="p3">30</span>
    <span class="p3">40</span>
    <span class="p3">50</span>
    <span class="p3">60</span>
    <span class="p3">70</span>
    <span class="p3">80</span>
    <span class="p3">90</span>
    <span class="p3">100</span>
    <span class="p3">110</span>
    <span class="p3">120</span>
    <span class="p3">130</span>
 </div>

Note que se os elementos atingirem a largura limite do elemento pai ou do view-port (ou do body, depende de como configurou) você poderia usar white-space: nowrap;, exemplo:

.back {
    white-space: nowrap;
}
<div class="back">
    <span class="p3">10</span>
    <span class="p3">20</span>
    <span class="p3">30</span>
    <span class="p3">40</span>
    <span class="p3">50</span>
    <span class="p3">60</span>
    <span class="p3">70</span>
    <span class="p3">80</span>
    <span class="p3">90</span>
    <span class="p3">100</span>
    <span class="p3">110</span>
    <span class="p3">120</span>
    <span class="p3">130</span>
    <span class="p3">10</span>
    <span class="p3">20</span>
    <span class="p3">30</span>
    <span class="p3">40</span>
    <span class="p3">50</span>
    <span class="p3">60</span>
    <span class="p3">70</span>
    <span class="p3">80</span>
    <span class="p3">90</span>
    <span class="p3">100</span>
    <span class="p3">110</span>
    <span class="p3">120</span>
    <span class="p3">130</span>
    <span class="p3">10</span>
    <span class="p3">20</span>
    <span class="p3">30</span>
    <span class="p3">40</span>
    <span class="p3">50</span>
    <span class="p3">60</span>
    <span class="p3">70</span>
    <span class="p3">80</span>
    <span class="p3">90</span>
    <span class="p3">100</span>
    <span class="p3">110</span>
    <span class="p3">120</span>
    <span class="p3">130</span>
 </div>

4
  • Legal, não sabia disso, obrigado 22/04/2019 às 16:02
  • Ainda não posso aceitar a resposta, mas quando liberarem eu aceito 22/04/2019 às 16:03
  • @JeffHenrique teste antes com calma, não tem prazo para aceitar a resposta, pode aceitar ela quando estiver confiante que resolveu o seu problema, se não tiver resolvido basta comentar aqui.
    – Syzoth
    22/04/2019 às 16:05
  • Ok, mas eu testei e funcionou como queria, obrigado 22/04/2019 às 16:26

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 .