如何在同一行获取菜单项

Posted

技术标签:

【中文标题】如何在同一行获取菜单项【英文标题】: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 元素进行更改)。 很高兴知道 - 完美。谢谢!

以上是关于如何在同一行获取菜单项的主要内容,如果未能解决你的问题,请参考以下文章

BottomNavigationView - 如何获取选定的菜单项?

如何在 WPF 中获取“选定的菜单项”

表中每一行的不同菜单项

右键单击任何菜单项时如何获取 MenuItem 名称?

Xamarin/SQLite/C# - 如何使用菜单项删除从列表视图和 SQLite 表中删除一行

如何在 NavigationView 中获取菜单项?