Flexbox 水平菜单居中,同时将最后一个元素保持在右侧 [英] Flexbox horizontal menu centering while keeping last element to the right side
问题描述
我正在尝试使用 flexbox 将菜单水平居中,但其最后一个元素位于网站右侧.
这是一个架构:
我尝试在最后一个元素上将 margin-left 设置为 auto,但它会将居中的菜单发送到左侧.将菜单的 margin-right 设置为 auto 不起作用.
我有一个hack"解决方案:在菜单的居中部分之前放置最后一个元素的不可见副本(可见性隐藏)并将其边距设置为自动.
任何更好的无黑客解决方案?
这是一个代码示例:
#container {显示:弹性;对齐内容:居中;对齐项目:居中;}#最后的 {左边距:自动;}
<div id="菜单"><span>1</span><span>2</span><span>3</span><div id="last">4
谢谢!
同时给 #menu
一个 auto
的左边距.
堆栈片段
#container {显示:弹性;对齐内容:居中;对齐项目:居中;}#last, #menu {左边距:自动;}#last span, #menu span {填充:10px 20px;背景:浅灰色;}
<div id="菜单"><span>1</span><span>2</span><span>3</span><div id="last"><span>4</span>