如何将徽标与导航栏对齐？答案

【问题标题】：How to align logo with nav bar?如何将徽标与导航栏对齐？
【发布时间】：2020-08-15 12:21:20
【问题描述】：

我根本无法弄清楚如何将我的 h1 标题（称为徽标）与我想要显示在右侧的导航栏对齐。我一直在尝试使 h1 标题显示：内联，导航栏浮动：正确，但导航栏似乎出现在我的 h1 标题下方。我还尝试将 h1 标头浮动到左侧。这是我的代码：

body {
    font-family: 'Courier New', Courier, monospace;
    color: white;
    margin: 0px;
}
#wrapper {
    min-width: 900px;
}


/* header*/
header {
    background: black;
    position: fixed;
    padding: 10px 5% 10px 5%;
    width: 90%;
}

h1#logo {
    margin: 0px;
    font-size: 32px;
    display: inline;
}


nav {
    margin: 0px;
    float: right;
}
ul {
    margin: 0px;
}
header a {
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}
li {
    display: inline;
}

和 HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Carl-Emil | Jazzpianist, musikunderviser</title>
        <link href="css/index.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <div id='wrapper'>
            <header>
                <h1 id= "logo">Carl-Emil Dons</p>
                <nav id="navigation">
                    <ul>
                        <li><a href= "about.html">Om Carl-Emil</a></li>
                        <li><a href= "music.html">Musik</a></li>
                        <li><a href= "underviser.html">Underviser</a></li>
                        <li><a href= "transcriptions.html">Transkribtioner</a></li>
                        <li><a href= "contact.html">Kontakt</a></li>
                    </ul>
                </nav>
            </header>
        </div>
    </body>
</html>

【问题讨论】：

请加snippet，以便我们更快地为您提供帮助。
您的问题在这里得到解答：stackoverflow.com/questions/14104599/…
这能回答你的问题吗？ Problems aligning my logo with the navigation bar
片段？这是如何运作的？编辑我的帖子时似乎找不到该功能。

标签： html css web header navbar

【解决方案1】：

在您的代码中，您有 </p>，它不合适。您必须删除它，因为您的浏览器不接受它。它在 HTML 中放错了位置。

试试新的 HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Carl-Emil | Jazzpianist, musikunderviser</title>
    <link href="css/index.css" type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div id='wrapper'>
      <header>
        <h1 id= "logo">
        Carl-Emil Dons
        <nav id="navigation">
          <ul>
            <li><a href= "about.html">Om Carl-Emil</a></li>
            <li><a href= "music.html">Musik</a></li>
            <li><a href= "underviser.html">Underviser</a></li>
            <li><a href= "transcriptions.html">Transkribtioner</a></li>
            <li><a href= "contact.html">Kontakt</a></li>
          </ul>
        </nav>
      </header>
    </div>
  </body>
</html>

【讨论】：

这样的菜鸟错误，我就是！谢谢！
@Calle 没有问题！祝你未来好运！