Algolia 水平显示的菜单

Question

我正在使用 Algolia 的 InstantSearch.js 来增强我的搜索结果。使用他们的 menu 优化 (https://www.algolia.com/doc/api-reference/widgets/menu/js/)，我构建了一个菜单，显示了我的目录中 6 个最具属性的类别，然后是 显示更多标签。

加载菜单时，它以垂直方式显示每个类别（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) 更改小部件的呈现，但我还没有尝试过这条路。

非常感谢任何帮助！

Answer 1

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

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

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

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

Algolia 水平显示的菜单

Algolia Horizontally Displayed Menu

css

algolia