Algolia 水平显示菜单

Question

我正在使用 Algolia 的 InstantSearch.js 来支持我的搜索结果。使用他们的 menu 改进 (https://www.algolia.com/doc/api-reference/widgets/menu/js/)，我构建了一个菜单，其中显示了我的目录中 6 个最重要的类别，然后是 Show More 标签。 p>

当菜单加载时，它以垂直方式显示每个类别（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;
}

我知道可以使用 connectors (https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js/#customize-the-complete-ui-of-the-widgets) 更改小部件的呈现方式，但我还没有尝试过这条路。

非常感谢任何帮助！

Answer 1

在menu live demo 上，设置此项确实有效：

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

inline虽然没有，但应该没什么大不了的吧？

如果它对您不起作用，则可能值得检查您的 CSS 加载顺序/覆盖您自己的样式的内容。