html - 响应式菜单不会在单列和三列之间切换

Question

我正在尝试编写一个简单的菜单，该菜单将在屏幕左边缘的单列和屏幕顶部的三列菜单之间切换。到目前为止，移动菜单的位置效果很好，但试图将单列分成三列并水平相邻放置是另一回事。到目前为止，我的代码如下所示:

HTML:

<div class="nav">
        <div id="logo">
        <ul>
        <li><center><img src="assets/img/logo.png"></center></li>
        </ul>
        </div>
        <div id="nav1">
        <ul><center>
        <li><img src="assets/img/home.png"></li>
        <li><img src="assets/img/gallery.png"></li>
        <li><img src="assets/img/sketch.png"></li>
        </center></ul>
        </div>
        <div id="nav2">
        <ul><center>
        <li><img src="assets/img/about.png"></li>
        <li><img src="assets/img/contact.png"></li>
        <li><img src="assets/img/store.png"></li>
        </center></ul>
        </div>
        </div>

CSS:

#logo {
    display: inline;
    width: 20
    float: left;
}

#nav1 {
    margin: 0;
    padding: 0;
    display: inline;
    width: 40%;
    margin-left: 20%;
}

#nav2 {
    margin: 0;
    padding: 0;
    display: inline;
    width: 40%;
    margin-left: 40%;
}

Answer 1

http://jsfiddle.net/a0edegg5/

因为您将宽度设置为 #nav1元素是 40% 和 #nav2也是 40%，'#logo' 是 20%，你还设置了 #nav1 的 margin-left 属性。和 #nav2 (20% 和 40%)。都是160%。所以这就是为什么所有元素不能在同一行(超过 100%)的原因。

无论如何你不应该使用标签 <center>不再，你应该使用 nav而不是 div .