javascript - 为什么我的水平 Owl Carousel SLIDER可以使元素垂直？

每个母产品都有大约14个相关产品，并且希望Owl-Carousel滑块起作用，以便访客可以一次滚动浏览4个。
我设置的相关产品可以很好地渲染，除了它们在垂直页面下方列出，而不是在轮播滑块内。

主页（index.html）上的同一站点上还有另一个猫头鹰轮播滑块，可以正常工作。

区别？
这将使每个产品详细信息表单的业务催化剂模块呈现为：

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

当然，每种产品的ID都不相同。

如果您想查看页面源代码，请点击这里-从LINE 289开始

Link to product parent detail page

要查看模块结果-这是猫头鹰轮播中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 -->

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

问题解决了
问题出在业务催化剂模块产品功能列表上
-这是经过编辑可在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％}

最佳答案

尝试使用：

display: inline-block;

还可以查看Here以获取有关创建网格的提示。