我创建了一个v-for循环，它读取JSON文件以生成包含不同产品信息的div。虽然div显示正确，但问题是它们是一个在另一个下面而不是并排显示的。我尝试更改div的CSS属性，如display属性，但没有成功。要以连续方式显示div，我需要修改什么？

<container class="newproducts">
  <div class="row">
    <div class="col-xl-12">
      <div class="llista">
        <div class="row">
          <div v-for="p in products" :key="p[0]" style="display: inline-block;">
            <div class="col-xl-3 col-l-3 col-md-3 col-sm-3 col-xs-3">
              <div class="producte">
                <img :src="p[2]" class="productes" alt="producte 1" />
                <p>{{ p[1] }}</p>
                <div v-if="p[4] === 'new'" class="etiqueta">
                  <img src="resources/imgs/sign_new_offer.png" alt="new" srcset="" />
                </div>
                <div v-if="p[4] === 'offert'" class="etiqueta-offer">
                  <img src="resources/imgs/sign_offer.png" alt="offer" srcset="" />
                </div>
                <transition name="fade" appear>
                  <div class="modal-overlay" v-if="showModal" @click="showModal = false"></div>
                </transition>
                <transition name="slide" appear>
                  <div class="modal" v-if="showModal">
                    <button class="close" @click="showModal = false">X</button>
                    <img src="resources/imgs/detail_offer2.png" class="detailimg" alt="offer2">
                    <p>HACOA MASKING TAPE HOLDER</p>
                    <p class="price">22, 00€</p>
                    <div class="etiqueta-purchase">
                      <img src="resources/imgs/sign_new_offer_purchase.png" alt="newpurchase">
                    </div>
                    <input v-model="value" type="text" />
                    <p class="error">{{ errorMessage }}</p>
                    <button class="comprar" @click="addToCart">COMPRAR</button>
                  </div>
                </transition>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</container>