如何在同一行上获取菜单项

Question

http://thehamburgercollection.com/shop/

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

我知道<ul>默认是一个块元素，因此我尝试将<ul>的ID "menu-navigation-1"和"menu"的类设为

display:inline-block;

但没有发生任何事情。

我也尝试过分配

display:inline-block;

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

Answer 1

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

这将有效：

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