在没有重叠导航菜单的情况下居中徽标

Question

我的网站使用左对齐的导航菜单。我想在导航栏中添加一个徽标，该徽标保持居中，但在屏幕尺寸减小时，我的菜单不会重叠。

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

<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;
}

Answer 2

你的徽标没有CSS，所以你没有找到它的位置。我认为这一定是你的主要问题。