Question

我已经查看了几个有关此事的问题;但是，他们似乎都没有解决或解决这个问题。

实质上发生的是h1和nav元素并排结束但没有正确排列。我已尝试过多个显示和浮动设置，但都没有。

CSS本身相对干净，也许flex不能正常工作或者我没有正确使用它？我不确定在这里引起问题的是什么帮助非常感谢！

＆＃13;

 /* Mobile CSS */
    #navbar h1 {
      display: block;
      padding-top: 1.4rem;
      text-align: center;
      font-weight: 400;
    }

    #hbmenu {
      display: block;
      position:absolute; top:1.8rem; left:2rem;
      background-color: transparent;
      border: none;
    }

    .iconbar {
      display: block;
      margin-top: 5px;
      height: 3px;
      border-radius: 3px;
      width: 30px;
      background-color: #888;
    }

    #hbmenu:hover .iconbar {
      background-color: #fff
    }

    #navbar > nav {
      display: flex;
      flex-direction: column;
      background-color: white;
      transform: 300ms all ease;
    }

    #navbar > nav > ul {
      margin: 0 auto;
      flex: 1;
      text-align: center;
      list-style-type: none;
     }

    #navbar > nav > ul > li {
      border-bottom: 1px solid rgba(51,51,51,0.4);
    }

    #navbar > nav > ul > li > a {/*border bottom none?*/
     display: block;
     padding: 1.2rem 0;
     text-decoration: none;
     transition: 250ms all ease;
    }

    /* Medium screens or Desktop screens */
    @media all and (min-width: 600px) {

      #hbmenu {
       display: none;
      }

      #navbar h1 {
       display: inline-block;
       padding-left: 2rem;
      }

      #navbar > nav {
       display: inline-block;
       padding-top: 2.1rem;
       background-color: #333333;
      }

      #navbar > nav > ul {
       padding-left: 1.8rem;
      }

      #navbar > nav > ul > li {
       display: inline-block;
      }

      #navbar > nav > ul > li > a {
         padding: 0 0.5rem;
         margin: 0 0.5rem;
         color: #9D9D9D;
         border-top: 1.5px solid transparent;
         border-bottom: 1.5px solid transparent;
         transition: 0.5s;
      }

      #navbar > nav > ul > li > a:hover {
         border-bottom: 1.5px solid #fff;
         color: #fff;
         transition: 0.5s;
      }

    }

    /* Color & Font Stuff */
    #navbar > nav > ul > li > a {
      font-family: "Helvetica Neue";
      font-weight: 600;
    }

    .highlight {
     color: #9D9D9D;
     transition: 0.5s;
    }

    .highlight:hover {
      color: #ffffff;
      transition: 0.5s;
    }

＆＃13;

<header>
     <div id="navbar">
      <button type="button" id="hbmenu">
      <span class="iconbar"></span>
      <span class="iconbar"></span>
      <span class="iconbar"></span>
     </button>
     <h1>
      <span class="highlight">Gatsby</span>
     </h1>
     <nav>
      <ul>
       <li>
        <a href="#">Home</a>
       </li>
       <li>
        <a href="#">Test</a>
       </li>
       <li>
        <a href="#">About</a>
       </li>
      </ul>
     </nav>
    </div>
   </header>

＆＃13;

删除h1元素允许我正确地将填充添加到nav元素的顶部。虽然，两者都只允许我正确填充h1。我确定填充不是垂直居中的最佳方式，但问题仍然存在。

更新：

misalignment picture

我快速标记了截图，希望能够澄清问题。底部的红线显示了当前文本的排列方式。虽然顶部的红线表明li元素应该如何垂直居中。

h1, nav element views

由于这表明可能更大的问题是它目前如何设置为元素不要＆＃34;快速＆＃34;如果你愿意的话。

Answer 1

display: inline-block;元素可以使用vertical-align: middle;垂直居中对齐，只需将其添加到h1和nav

＆＃13;

 /* Mobile CSS */
    #navbar h1 {
      display: block;
      text-align: center;
      font-weight: 400;
    }

    #hbmenu {
      display: block;
      position:absolute; top:1.8rem; left:2rem;
      background-color: transparent;
      border: none;
    }

    .iconbar {
      display: block;
      margin-top: 5px;
      height: 3px;
      border-radius: 3px;
      width: 30px;
      background-color: #888;
    }

    #hbmenu:hover .iconbar {
      background-color: #fff
    }

    #navbar > nav {
      display: flex;
      flex-direction: column;
      background-color: white;
      transform: 300ms all ease;
    }

    #navbar > nav > ul {
      margin: 0 auto;
      flex: 1;
      text-align: center;
      list-style-type: none;
     }

    #navbar > nav > ul > li {
      border-bottom: 1px solid rgba(51,51,51,0.4);
    }

    #navbar > nav > ul > li > a {/*border bottom none?*/
     display: block;
     padding: 1.2rem 0;
     text-decoration: none;
     transition: 250ms all ease;
    }

    /* Medium screens or Desktop screens */
    @media all and (min-width: 600px) {

      #hbmenu {
       display: none;
      }

      #navbar h1 {
       display: inline-block;
       padding-left: 2rem;
       vertical-align: middle;
      }

      #navbar > nav {
       display: inline-block;
       vertical-align: middle;
       background-color: #333333;
      }

      #navbar > nav > ul {
       padding-left: 1.8rem;
      }

      #navbar > nav > ul > li {
       float: left;
      }

      #navbar > nav > ul > li > a {
         padding: 0 0.5rem;
         margin: 0 0.5rem;
         color: #9D9D9D;
         border-top: 1.5px solid transparent;
         border-bottom: 1.5px solid transparent;
         transition: 0.5s;
      }

      #navbar > nav > ul > li > a:hover {
         border-bottom: 1.5px solid #fff;
         color: #fff;
         transition: 0.5s;
      }

    }

    /* Color & Font Stuff */
    #navbar > nav > ul > li > a {
      font-family: "Helvetica Neue";
      font-weight: 600;
    }

    .highlight {
     color: #9D9D9D;
     transition: 0.5s;
    }

    .highlight:hover {
      color: #ffffff;
      transition: 0.5s;
    }

＆＃13;

<header>
     <div id="navbar">
      <button type="button" id="hbmenu">
      <span class="iconbar"></span>
      <span class="iconbar"></span>
      <span class="iconbar"></span>
     </button>
     <h1>
      <span class="highlight">Gatsby</span>
     </h1>
     <nav>
      <ul>
       <li>
        <a href="#">Home</a>
       </li>
       <li>
        <a href="#">Test</a>
       </li>
       <li>
        <a href="#">About</a>
       </li>
      </ul>
     </nav>
    </div>
   </header>

＆＃13;

Answer 2

您可以尝试使用flexbox解决您的问题。检查codepen示例。我认为这是你的要求

.header-container {
  display: flex;
  max-width: 600px;
  align-items: center;
}

h1, nav {
  flex-grow: 1;
}

检查codepen。

h1和nav元素拒绝正确排列

2 个答案: