阿尔及利亚水平显示菜单

Question

我正在使用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）来更改小部件的呈现，但是我还没有冒险走这条路。

非常感谢您的帮助！

Answer 1

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

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

inline并非如此，但这不应该大吗？

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