如何在同一行获取菜单项

Posted 2023-03-05

【中文标题】如何在同一行获取菜单项

【英文标题】：How to Get Menu Items on Same Row

【发布时间】：2017-04-06 12:41:27

【问题描述】：

http://thehamburgercollection.com/shop/

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

我知道<ul> 默认是一个块元素，所以我尝试给<ul> id 为"menu-navigation-1" 和"menu" 的类一种样式

display:inline-block;

但是什么都没有发生。

我也试过分配

display:inline-block;

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

【问题讨论】：

您可以使用display: inline-block，但在您的li.menu-item 元素中，而不是您的<ul>。

【参考方案1】：

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

这将起作用：

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

【讨论】：

是的，做到了。那么 默认也是块元素？另外，有没有办法告诉 “在容器内均匀分布”，因为现在“我的帐户”右侧有一个边距？

(1) li 默认为display: list-item;，其功能类似于块元素。如您所知，当您选择一个元素时，您可以在浏览器的开发工具中看到默认样式。 (2) 为了让您的内容均匀分布，请撤消此示例中的上述代码，而是在 ul 上使用 flex，如下所示：.menu display: flex; justify-content: space-between; （无需对 .menu-item 元素进行更改）。

很高兴知道 - 完美。谢谢！