如何获取同一行的菜单项

Question

http://thehamburgercollection.com/shop/

如果您查看菜单，您会注意到所有菜单项都在一个容器中左对齐，位于一列中。但我想要的是让它们均匀地排成一排，然后折叠成平板电脑和手机大小的汉堡菜单。

我知道 <ul> 默认是一个块元素，所以我尝试给 <ul> 和 "menu-navigation-1" 的 class 和 [=15= 的 class ] 风格

display:inline-block;

但是什么也没有发生。

我也试过分配

display:inline-block;

到包含 ul 的 div，它的 class 为 "menu-navigation-container"，但这也不起作用。一旦我能够将菜单项均匀地分布在一行中，我就能够创建汉堡菜单。 This 是我们希望菜单如何运行的完美示例。

Answer 1

关闭！列表项 (li) 元素需要 display: inline-block;，而不是列表本身 (ul)。

这会起作用：

.menu-item {
  display: inline-block;
  margin-right: 10px; /* add a gap between items */
}