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

问题描述

我简单地想不出如何将我的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>

解决方法

在您的代码中，您有</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>

header html navbar web

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

问题描述

解决方法

相关问答