如何将导航栏列表与导航栏中徽标的右侧对齐？

蓝玫瑰

我刚开始为初学者学习 HTML/CSS 课程，我们有一个最终项目需要创建一个多页网站，所以我目前正在通过制作自己的网站来练习，但我似乎无法弄清楚如何将导航栏列表对齐到徽标的右侧，其中徽标位于导航栏的左侧。

这是我的代码：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Final Project Practice</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="navbar">
        <nav>
                <a href="#">
                    <img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
                </a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </div>

</body>
</html>

CSS:

body {
    background: black;
    margin: 0;
    color: white;
}

.navbar {
    background-color: white;
    display: block;
}

.navbar a  {
    display: inline-flex;
}

.logo {
    width: 5em;
    margin: 1em;
    border-radius: 50%;
    background-color: black;
    float: left;
    position: relative;
}
.navbar ul{
    display: flex;
    list-style: none;
    margin: 0px 25px 0px 90px;
    padding: 0;
}

.navbar ul li a {
    list-style: none;
    text-decoration: none;
    color: var(--primary-color);
    font-size: 1.5em;
    font-weight: bold;
    margin-right: 1em;
}

所有帮助将不胜感激！

尼古拉·帕维切维奇

将导航设置为 flex 容器：

body {
    background: black;
    margin: 0;
    color: white;
}

nav {
  display: flex;
  align-items: center;
  background-color: white;
}


.logo {
    width: 5em;
    margin: 1em;
    border-radius: 50%;
    background-color: black;
}
.navbar ul{
    display: flex;
    list-style: none;
    /*margin: 0px 25px 0px 90px;*/
    padding: 0;
}

.navbar ul li a {
    list-style: none;
    text-decoration: none;
    color: black;
    font-size: 1.5em;
    font-weight: bold;
    margin-right: 1em;
}

<body>
    <div class="navbar">
        <nav>
            <a href="#">
                <img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
            </a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </div>

</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。