将 <h1> 与 Html5 中的 <nav> 对齐

Question

你能帮我调整那条线吗？

我只是想将 ("LOGO") 与 ("ITEM 1 - ITEM 2 -ITEM 3") 对齐，但我做不好。你知道如何修改 css 文件吗？

这是我的代码片段：

body{
    margin: 0;
 padding: 0;
 background-color: gray;
}

main {
 margin: 0 auto;
 width: 80%;
 background-color: #FFFFFF;
}

#first-nav {
 background-color: #000;
 color: #FFF;
 padding: 6px 1em;
}

 #first-nav a {
  color: #FFF;
  padding-right: 1em;
 }
 
#second-nav {
 padding: 4px 1em;
 height: 100px;
}

 #second-nav h1 {
  font-size: 150%;
  display: inline-block;
 }
  
 #main-navigation {
  float: right;
 }

  #main-navigation a {
   color: #000;
   padding-left: 1em;
  }

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
 </head>
 <body>
  <main>
   <section id="navigation">
    <nav id="first-nav">
     <a href="#">element 1</a>
     <a href="#">element 2</a>
     <a href="#">element 3</a>
    </nav>
    <section id="second-nav">
     <h1>LOGO</h1>
     <nav id="main-navigation">
      <a href="#">ITEM 1</a>
      <a href="#">ITEM 2</a>
      <a href="#">ITEM 3</a>
     </nav>
    </section>
   </section>
  </main>
 </body>
</html>

谢谢！

Answer 1

浏览器默认为某些元素添加样式。在这种情况下，H1 应用了保证金。我删除了它。

body{
    margin: 0;
 padding: 0;
 background-color: gray;
}

main {
 margin: 0 auto;
 width: 80%;
 background-color: #FFFFFF;
}

#first-nav {
 background-color: #000;
 color: #FFF;
 padding: 6px 1em;
}

 #first-nav a {
  color: #FFF;
  padding-right: 1em;
 }
 
#second-nav {
 padding: 15px 1em 4px 1em; /* Add more space to top of nav */
 height: 100px;
}

 #second-nav h1 {
  font-size: 150%;
  display: inline-block;
                margin: 0; /* Remove the margin */
 }
  
 #main-navigation {
  float: right;
                padding-top: .25em; /* pad the top to align right nav */
 }

  #main-navigation a {
   color: #000;
   padding-left: 1em;
  }

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
 </head>
 <body>
  <main>
   <section id="navigation">
    <nav id="first-nav">
     <a href="#">element 1</a>
     <a href="#">element 2</a>
     <a href="#">element 3</a>
    </nav>
    <section id="second-nav">
     <h1>LOGO</h1>
     <nav id="main-navigation">
      <a href="#">ITEM 1</a>
      <a href="#">ITEM 2</a>
      <a href="#">ITEM 3</a>
     </nav>
    </section>
   </section>
  </main>
 </body>
</html>

Answer 2

将 margin-top:0px 设置为 h1 徽标。

Answer 3

将 margin:0 设置为 h1。默认情况下，浏览器会向 HTML 元素添加边距，因此您需要根据您的要求进行调整。

body{
    margin: 0;
 padding: 0;
 background-color: gray;
}

main {
 margin: 0 auto;
 width: 80%;
 background-color: #FFFFFF;
}

#first-nav {
 background-color: #000;
 color: #FFF;
 padding: 6px 1em;
}

 #first-nav a {
  color: #FFF;
  padding-right: 1em;
 }
 
#second-nav {
 padding: 4px 1em;
 height: 100px;
}

 #second-nav h1 {
  font-size: 150%;
  display: inline-block;
        margin:0;
 }
  
 #main-navigation {
  float: right;
 }

  #main-navigation a {
   color: #000;
   padding-left: 1em;
  }

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
 </head>
 <body>
  <main>
   <section id="navigation">
    <nav id="first-nav">
     <a href="#">element 1</a>
     <a href="#">element 2</a>
     <a href="#">element 3</a>
    </nav>
    <section id="second-nav">
     <h1>LOGO</h1>
     <nav id="main-navigation">
      <a href="#">ITEM 1</a>
      <a href="#">ITEM 2</a>
      <a href="#">ITEM 3</a>
     </nav>
    </section>
   </section>
  </main>
 </body>
</html>

Answer 4

body{
  margin: 0;
  padding: 0;
  background-color: gray;
}

main {
  margin: 0 auto;
  width: 80%;
  background-color: #FFFFFF;
}

#first-nav {
  background-color: #000;
  color: #FFF;
  padding: 6px 1em;
}

#first-nav a {
  color: #FFF;
  padding-right: 1em;
}

#second-nav {
  padding: 4px 1em;
  height: 100px;
  text-align: justify;
}

#second-nav h1 {
  font-size: 150%;
}

#second-nav h1, #second-nav nav {
  display: inline-block;
  vertical-align: middle;
}

#second-nav:after {
  content: "";
  display: inline-block;
  width: 100%;
}

#main-navigation a {
  color: #000;
  padding-left: 1em;
}

<main>
  <section id="navigation">
    <nav id="first-nav">
      <a href="#">element 1</a>
      <a href="#">element 2</a>
      <a href="#">element 3</a>
    </nav>
    <section id="second-nav">
      <h1>LOGO</h1>
      <nav id="main-navigation">
        <a href="#">ITEM 1</a>
        <a href="#">ITEM 2</a>
        <a href="#">ITEM 3</a>
      </nav>
    </section>
  </section>
</main>

Answer 5

您可以对部分元素使用 display:table，对他们的孩子使用 display:table-cell。

body{
    margin: 0;
 padding: 0;
 background-color: gray;
}

main {
 margin: 0 auto;
 width: 80%;
 background-color: #FFFFFF;
}

#first-nav {
 background-color: #000;
 color: #FFF;
 padding: 6px 1em;
}

 #first-nav a {
  color: #FFF;
  padding-right: 1em;
 }
 
#second-nav {
 padding: 4px 1em;
 height: 100px;
display:table;
}

 #second-nav h1 {
  font-size: 150%;
  display: table-cell;
 }
  
 #main-navigation {
  display:table-cell;
 }

  #main-navigation a {
   color: #000;
   padding-left: 1em;
  }

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
 </head>
 <body>
  <main>
   <section id="navigation">
    <nav id="first-nav">
     <a href="#">element 1</a>
     <a href="#">element 2</a>
     <a href="#">element 3</a>
    </nav>
    <section id="second-nav">
     <h1>LOGO</h1>
     <nav id="main-navigation">
      <a href="#">ITEM 1</a>
      <a href="#">ITEM 2</a>
      <a href="#">ITEM 3</a>
     </nav>
    </section>
   </section>
  </main>
 </body>
</html>

Answer 6

在 #second-nav 上使用 display: flex，在 #main-navigation 上使用 align-items: center; 和 margin-left: auto;：

body {
  margin: 0;
  padding: 0;
  background-color: gray;
}
main {
  margin: 0 auto;
  width: 80%;
  background-color: #FFFFFF;
}
#first-nav {
  background-color: #000;
  color: #FFF;
  padding: 6px 1em;
}
#first-nav a {
  color: #FFF;
  padding-right: 1em;
}
#second-nav {
  padding: 4px 1em;
  height: 100px;
  display: flex;
  align-items: center;
}
#second-nav h1 {
  font-size: 150%;
}
#main-navigation {
  margin-left: auto;
}
#main-navigation a {
  color: #000;
  padding-left: 1em;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>

<body>
  <main>
    <section id="navigation">
      <nav id="first-nav">
        <a href="#">element 1</a>
        <a href="#">element 2</a>
        <a href="#">element 3</a>
      </nav>
      <section id="second-nav">
        <h1>LOGO</h1>
        <nav id="main-navigation">
          <a href="#">ITEM 1</a>
          <a href="#">ITEM 2</a>
          <a href="#">ITEM 3</a>
        </nav>
      </section>
    </section>
  </main>
</body>

</html>

将 <h1> 与 Html5 中的 <nav> 对齐

Align <h1> with <nav> in Html5

html

css

text-align