如何在徽标图像旁边对齐菜单项？

如何解决如何在徽标图像旁边对齐菜单项？

我只是无法正确放置导航栏。

这是它的图片以及我希望文本所在的位置：

这是它的 HTML 和 css-

    <header>
        <a href="index.html" class="logo"><img src="img.png" width="9%"></a>
        <div class="mean-toggle"></div>
        <nav>
            <ul>
                <li><a href="#">contact</a></li>
                <li><a href="#">about us</a></li>
                <li><a href="#">something</a></li>
                <li><a href="#">something</a></li>
                <li><a href="#">something</a></li>
                <li><a href="index.html">home</a></li>
            </ul>
        </nav>
        <div class="clear"></div>
    </header>




header {
    position: relative;
    max-width: 1450px;
    max-height: 125px;
    margin: auto;
    background: rgb(255,255,255);
    border-radius: 0px;
}

.logo {
    float: left;
    text-align: left;
    padding: 0 20px;
    color:#069370;
}

nav {
    float: right;
}

.clear {
    clear: both;
}

nav ul {
    margin-top: 10px;
    padding: 0px;
    display: flex;
}

nav ul li {
    list-style: none;
    margin-top: auto;
}

nav ul li a {
    display: block;
    margin: 10px 0;
    padding: 0px 20px;
    text-decoration: none;
    color: rgb(50,100,200);
    font-family: 'Secular One',sans-serif;
}

nav ul li a.active,nav ul li a:hover {
    background: rgb(200,50,100);
    color: rgb(150,200,50);
    transition: 1s;
}

我需要的只是获取导航栏中间的内容 但这是不可能的，所以如果你知道某种方式，请写信给我， 谢谢。

解决方法

如果您想以最佳方式执行此操作，请查找 flexbox，但如果您确实必须使用浮动，则请删除

nav {float:right;}

并将其替换为

nav {overflow:hidden;}

,

使用display:flex

或为 img 使用浮动左侧