css - Algolia 水平显示菜单

我正在使用Algolia的InstantSearch.js来增强搜索结果。使用他们的菜单细化（https://www.algolia.com/doc/api-reference/widgets/menu/js/），我构建了一个菜单，该菜单显示目录中6个最具有属性的类别，后跟一个Show More标签。

加载菜单时，它将以垂直方式显示每个类别（CSS中无序列表项的块格式）。



我希望它以水平布局显示（CSS中无序列表项目的内联格式），但是似乎无法对元素位置方面应用于菜单的样式进行任何更改。



这是Algolia模板代码：

<li class="nav-item">
  <a class="nav-link" href="{{slug}}">
    <span class="{{cssClasses.label}}">{{label}}</span>
    <span class="{{cssClasses.count}}">
    {{#helpers.formatNumber}}{{count}}{{/helpers.formatNumber}}
    </span>
  </a>
</li>

该Algolia代码是以这种方式呈现的：

<ul class="ais-Menu-list">
  <li class="ais-Menu-item">
    <div>
      <li class="nav-item"> <a class="nav-link" href=""> <span class="ais-Menu-label">Worksheet / Template</span> <span class="ais-Menu-count tiny-text"> 388 </span> </a> </li>
    </div>
  </li>

  ...

</ul>

而且我尝试应用以下样式，但运气不好，无法更改列表项的显示行为：

ul.ais-Menu-list li.ais-Menu-item div li.nav-item,
li.nav-item,
li.nav-item a.nav-link {
  display:inline !important;
}

我知道可以使用连接器（https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js/#customize-the-complete-ui-of-the-widgets）更改小部件的呈现，但是我还没有冒险走这条路。

任何帮助是极大的赞赏！

最佳答案

在menu live demo上，设置确实可行：

li.ais-Menu-item {
    display: inline-block;
}

inline虽然不是，但这应该没什么大不了的？

如果对您不起作用，则值得检查一下CSS加载顺序/哪些内容会覆盖您自己的样式。

关于css - Algolia 水平显示菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54121460/