html - 不重叠导航菜单的居中 Logo

Question

我的站点使用左对齐的导航菜单。我想向保持居中的导航栏添加一个 Logo ，但在屏幕尺寸缩小时不会与我的菜单重叠。

找不到任何有用的资源，所以这是我当前的代码减去样式:

<nav>
    <div class="menu">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
    <div class="logo"><a href="#"><img src="images/logo.png"></a></div>
</nav>

nav {
    width: 100%;
    height: 50px;
    position: absolute;
    line-height: 50px;
}

.menu {
    margin-right: auto;
}

.menu div {
    display: inline-block;
}

.logo{
    position: relative;
    margin-right: auto;
    margin-left: auto;
    top: -41px;
    max-width: 160px;
    height: 37px;
}

Answer 1

根据您想要实现的目标，尝试以下解决方案之一:

.menu, .logo {
    float: left;
}

或

.menu {
    float: left;
}
.logo {
    float: right;
}