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

Question

我只是想不出如何将我的 h1 header（称为徽标）与我想要显示在右侧的导航栏对齐。我一直在尝试使 h1 header 显示：内联，导航栏浮动：正确，但导航栏似乎在我的 h1 header 下。我还尝试将 h1 header 浮动到左侧。这是我的代码：

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>

Answer 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>

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

How to align logo with nav bar?

html

css

header

navbar

web