Question

我希望徽标停留在导航菜单项的中间，看起来徽标会像this example中那样“分割”导航。重要的是，徽标也位于页面中间。所以菜单项是围绕它们的，但徽标是“固定的”。

我使用javascript动态地将sepeartor div添加到菜单项的中间（当六个项目时，分隔符停留在第三个项目之后）以创建我在上面描述的效果。

{{1}}

但是当编辑器向导航添加新菜单项或重命名项目（CMS）时，徽标不再居中。固定边距不起作用，但我不知道如何动态计算宽度或边距大小。我想通过javascript添加值。我认为这是唯一可行的方法。

所以我需要一个脚本或一个有用的想法来做到这一点。

Answer 1

响应式解决方案，裸露的HTML＆amp; CSS：

<div class="navBar">
    <table class="menu">
        <tr>
            <td class="left">
                <table class="nested" >
                    <tr>
                        <td><a href="#">first</a></td>
                        <td><a href="#">second</a></td>
                    </tr>
                </table>
            </td>
            <td class="logo">
                <a href="#">
                    <img src="http://i48.tinypic.com/2mob6nb.png" alt="Michigan State" />
                </a>
            </td>
            <td class="right">
                <table class="nested" >
                    <tr>
                        <td><a href="#">third</a></td>
                        <td><a href="#">fourth</a></td>
                        <td><a href="#">fifth</a></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

<style>
    .navBar {
        width: 100%;
        margin: 0 auto;
    }
    .menu {
        width: 100%;
    }
    .menu td {
        text-align: center;
    }
    .menu .logo {
        width: 22%;
    }
    .menu .logo img {
        width: 200px;
        max-width: 100%;
    }
    .left, .right {
        width: 39%;
    }
    .nested {
        width: 100%;
    }
    .nested td {
        text-align: center;
    }
</style>

View on Codepen

Answer 2

好的，我尝试了一些东西，我不想使用两种导航，但我做了：

<div class="inner">
 <div class="desktop_navi">
  <ul>
   <li><a href="#">Menu</a></li>
   <li><a href="#">Menu</a></li>
  </ul>             
 </div>            
 <div class="logo"><a href="#"><img width="281" height="280" src=""></a></div>   
 <div class="desktop_navi">
  <ul>
   <li><a href="#">Menu</a></li>
   <li><a href="#">Menu</a></li>
   <li><a href="#">Menu</a></li> 
  </ul>             
 </div>    
</div>

这就是我的新HTML-Markup。这是我使用的风格：

.inner {
  display: table;
  width: 100%;
}
.inner .desktop_navi,.logo {
  display: table-cell;
}
.inner .desktop_navi {
  text-align: left;
}
.header .inner .desktop_navi:first-child {
  text-align: right;
}

这不是最好的解决方案，但它有效，响应迅速，旧浏览器也没有问题。如果有人通过单一导航找到真正好的解决方案，请告诉我！

Answer 3

弹性框可能适用于此。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在菜单中动态居中徽标

3 个答案: