我正在开发某种类似花哨的菜单,但似乎无法理解当前面临的问题.这是一张图片来说明问题：
整个过程是使用一个带有li子项的ul的nav标签构建的.
基本上,右边的盒子必须始终保持在顶行,右边缘,当窗口缩小或缩小时,这个位置/行为必须保持,而其他常规菜单项应该在第二行折叠.
2个方框必须维护一个顺序：左边的那个是第一个li元素,右边的那个是最后一个li元素
这是我到目前为止所尝试的：
– 位置绝对不会削减它,因为它确实会保持在右侧,但它可能会或可能不会覆盖其他元素(当前情况);
– 浮动它,可能会与下一行的其他元素一起崩溃
– 添加一个填充到nav或ul标签,将工作,但是,其他菜单项将始终有一个右边距,不允许他们永远落在正确的四四方方的东西;
这是问题的一个小问题(缩小结果窗口)：menu issue
我愿意接受任何想法,甚至改变整个标记,如果这是解决方案,或者如果它的工作有些奇特的js.谢谢！
使用的标记：
使用的CSS：
a{
text-decoration: none;
color: #656565;
padding: 10px;
font-size: 1.4em;
line-height: 50px;
}
.menu-item-block{
width: 50px;
height: 50px;
background: #656565;
}
.menu-last-item-block{
position: absolute;
top: 0;
right: 0;
}
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
li{
float: left;
}
nav.secondary-navigation{
position: relative;
display: inline-block;
width: 100%;
}
nav.secondary-navigation:after{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 5px;
background: #656565;
}
ul.secondary-navigation-list:after,ul.secondary-navigation-list:before{
content: '';
position: absolute;
width: 5px;
height: 100%;
background: #656565;
}
ul.secondary-navigation-list:before{
left: 0;
}
ul.secondary-navigation-list:after{
right: 0;
}
最佳答案
您可以通过对html和css进行一些操作来实现：
>改变li的顺序,使2个特殊的顺序排在最前面
>更改辅助导航列表的css规则
.menu-last-item-block{
float:right;
}
