html - 如何获取同一行的菜单项

Question

http://thehamburgercollection.com/shop/

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

我知道 <ul>默认情况下是 block 元素，所以我尝试给出 <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 */
}