html - header 导航换行符

我有一个使用此结构的浮动div创建的网站标题：

nav {
    height:inherit;
    width:100%;
    margin:0 auto;
    position:relative;
    z-index:10;
    text-align: center;
}
#nav-wrap {
    min-width: 100%;
    width: auto !important;
    width:100%;
    white-space:nowrap;
}
nav ul#nav-left, #nav-right {
    list-style-type:none;
    display:inline-block;
    margin:0;
    padding:0;
    width:auto;
    height:100%;
}
nav img {
    display:inline-block;
    padding:0;
    margin:0;
    max-height:225px;
    vertical-align:top;
}
nav ul li {
    display:inline-block;
    text-align:center;
    font-family: 'Oswald',helvetica,arial,sans-serif;
    font-size:1.8rem;
    font-weight:400;
    padding:0 30px;
    margin-top:30px;
}

<nav>
  <div id="nav-wrap">
    <ul id="nav-left">
      <li>Option1</li>
      <li>Option2</li>
      <li>Option3</li>
    </ul>
    <img src="assets/img/img.png" />
    <ul id="nav-right">
      <li>Option4</li>
      <li>Option5</li>
      <li><a href="#contact">Option6</a>
      </li>
    </ul>
</nav>

更新

我一直在玩布局游戏，花车让事情变得艰难。因此，它们全部显示为inline-block，没有浮点数，但中心徽标仍未调整大小，我无法弄清楚自己在做什么错。查看下面链接的分阶段网站，以了解我要做什么。徽标重叠是有意的。

Staged site

感谢您的帮助或建议。如果可能的话，我想避免使用display:table。

最佳答案

@media查询是您所需要的。

@media (max-width: 700px) {
    nav ul li {
        font-size:1.3rem;
        padding:0 10px;
    }
}
@media (max-width: 1200px) {
    nav ul li {
        font-size:1.5rem;
        padding:0 20px;
    }
}
@media (min-width: 1201px) {
    nav ul li {
        font-size:1.8rem;
        padding:0 30px;
    }
}

@media (max-width: 400px) {
    nav ul li {
     /*For this you need to use mobile friendly menu        **/
    }
}

关于html - header 导航换行符，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27452500/