html - 菜单布局问题

Question

我正在制作某种精美的菜单，但似乎无法解决当前面临的问题。这是说明问题的图像:

整个事情是使用 nav 标签构建的，该标签有一个 ul 和 li 子标签。

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

2个盒子必须保持顺序:左边的是第一个li元素，右边的是最后一个li元素

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

-position absolute 不会削减它，因为它确实会留在右边，但它可能会或可能不会覆盖其他元素(当前情况)；

- float 它，可能会与下一行的其他元素一起折叠

- 在 nav 或 ul 标签右侧添加填充，将起作用，但是，其他菜单项将始终有一个右边距，不会让它们落在正确的四四方方的东西下面；

这是解决问题的 js fiddle (缩小结果窗口):menu issue

我对任何想法都持开放态度，如果这是解决方案，甚至可以更改整个标记，或者如果可行的话，可以更改一些花哨的 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. 更改 secondary-navigation-list 的 css 规则

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

参见 fiddle :http://jsfiddle.net/CLtCL/12/