菜单布局问题

Question

我正在开发某种类似花哨的菜单,但似乎无法理解当前面临的问题.这是一张图片来说明问题:

整个过程是使用一个带有li子项的ul的nav标签构建的.

基本上,右边的盒子必须始终保持在顶行,右边缘,当窗口缩小或缩小时,这个位置/行为必须保持,而其他常规菜单项应该在第二行折叠.

2个方框必须维护一个顺序:左边的那个是第一个li元素,右边的那个是最后一个li元素

这是我到目前为止所尝试的:

- 位置绝对不会削减它,因为它确实会保持在右侧,但它可能会或可能不会覆盖其他元素(当前情况);

- 浮动它,可能会与下一行的其他元素一起崩溃

- 添加一个填充到nav或ul标签,将工作,但是,其他菜单项将始终有一个右边距,不允许他们永远落在正确的四四方方的东西;

这是问题的一个小问题(缩小结果窗口):菜单问题

我愿意接受任何想法,甚至改变整个标记,如果这是解决方案,或者如果它的工作有些奇特的js.谢谢!

使用的标记:

<nav class="secondary-navigation main-section">
<ul class="align-left secondary-navigation-list">
    <li class="menu-item-block">

    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li>
        <a href="#">Menu Item</a>
    </li>
    <li class="menu-item-block menu-last-item-block">

    </li>
</ul>

使用的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;
}

Answer 1

您可以通过对 html 和 css 进行一些操作来做到这一点：

1. 更改 li 的顺序，使 2 个特殊的位于顶部

   <ul class="align-left secondary-navigation-list">
       <li class="menu-item-block">
   
       </li>
       <li class="menu-item-block menu-last-item-block">
   
       </li>
       <li>
           <a href="#">Menu Item</a>
       </li>....
   

2. 更改CSS规则secondary-navigation-list

   .menu-last-item-block{
        float:right;
    }
   

参见小提琴： http: //jsfiddle.net/CLtCL/12/