如何在同一行获取菜单项
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 - 如何获取选定的菜单项?