为什么我的水平 owl-carousel SLIDER 会垂直渲染项目？

Question

我有大约 14 个与每个父产品相关的产品，并且希望 Owl-Carousel 滑块能够正常工作，以便访问者可以一次滚动浏览 4 个。 我设置的相关产品的渲染效果很好，只是它们列在页面垂直下方而不是在轮播滑块内。

在同一站点的主页 (index.html) 上还有另一个 owl-carousel 滑块，它工作正常。

区别？ 这个获取每个产品详细信息表单 Business Catalyst 模块，呈现为：

<ul class="productfeaturelist">
<li id="catProdTd_9568921" class="productItem">  

当然，每个产品的 id 都是不同的。

如果您想查看页面源代码，这里是链接 - 从 LINE 289 开始 Link to product parent detail page

查看模块结果 - 这是 owl-carousel 中 ONE 产品的一些代码

我可以添加什么来使每个产品细节块呈现水平？

<section class="section wow fadeInUp">
    <h3 class="section-title">Accessories and Related Products</h3>
    <div class="owl-carousel home-owl-carousel custom-carousel owl-theme outer-top-xs">
      <div class="item item-carousel">
        <div class="products">
          <div class="product"> 

<ul class="productfeaturelist">
<li id="catProdTd_9568921" class="productItem">

<!-- product detail  --> 

<div class="product-image">
  <div class="image"> <a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only"><img id="catsproduct_9568921" src="/assets/images/products-sm/FF400-2.jpg?bc_t=jVmrpgtTMrRukibgVCEGpA" alt="Fibre-Metal Headgear-Headgear" border="0" /></a> </div>
  <!-- /.image --> 
</div>
<!-- /.product-image -->

<div class="product-info text-left">
  <h4 class="name"> <a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only">Fibre-Metal Headgear-Headgear</a> </h4>
  <div class="description"></div>
  <div class="product-price"> <strong>$19.50</strong> discountcryo price</div>
  <!-- /.product-price --> 

</div>
<!-- /.product-info -->

<div class="cart clearfix animate-effect">
  <div class="action">
    <h4>
      <div class="action"><a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only">SEE DETAIL</a></div>
    </h4>
  </div>
  <!-- /.action --> 
</div>
<!-- /.cart clearfix -->
<div class="padd-bottom-20"></div>

<!--/ END product detail  --> 

</li></ul> </div>
          <!-- /.product --> 
        </div>
        <!-- /.products --> 
      </div>
      <!-- /.item item carousel --> 
    </div>
    <!-- /.home-owl-carousel --> 
  </section>
  <!-- /.section --> 

希望这更好理解？ 谢谢 威尔兹

问题已解决 问题出在 Business Catalyst Module 产品功能列表上 - 这是编辑后在owl-carousel中正常运行的模块：

{module_productfeaturelist tag="{tag_name}" render="collection" rowCount="99" sortType="Weight" template="/Layouts/OnlineShop/prodFeature.tpl"} {% comment %} /* OLD */ {module_productfeaturelist,{tag_name},99,weight,_self,true } {% endcomment %}

Answer 1

尝试使用：

display: inline-block;

还可以查看Here，了解有关创建网格的提示。