修复元素的位置[重复]

Question

我的元素位置问题不大。我想在徽标图像之后的右侧显示导航，但不幸的是它不正确。在下面，您可以看到我现在拥有的东西。我该如何解决？我尝试使用 float:right to menu 但没有帮助。

HTML 标记：

       <header>
            <section class="section section--menu" id="Juno">
                <img id="logo" src="img/logo.png" height="150px" width="150px">

                <nav class="menu menu--juno">
                    <ul class="menu__list">
                        <li class="menu__item menu__item--current"><a href="#" class="menu__link">Home</a></li>
                        <li class="menu__item"><a href="#" class="menu__link">News</a></li>
                        <li class="menu__item"><a href="#" class="menu__link">FAQ</a></li>
                        <li class="menu__item"><a href="#" class="menu__link">Contact us</a></li>
                    </ul>
                </nav>
            </section>
        </header>

CSS：

.menu {
    line-height: 1;
    float: right;
    margin-bottom: 15px;
}
#logo{
    margin-top:15px;
}
.section {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
}
.section--menu {
    position: relative;
    overflow: hidden;
}

Answer 1

也许是这样：

position:absolute; right: 10%; bottom: 10%;