水平导航栏的元素不顶部对齐

Question

我想在大屏幕上垂直对齐导航栏的元素，在小屏幕上水平对齐。这很有效，除了在小屏幕上，一个元素不是顶部对齐而是稍微向下移动（见图）。 如何使水平导航栏的元素顶部对齐？我希望“Publications”元素与“Teaching”和“Home”元素顶部对齐。

将 align: top 添加到不同的 CSS 环境没有任何效果。

感谢您的帮助。

.nav {
 padding-left:10px; 
}

.nav ul {
  all: unset;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 10px 5px;
}

.nav ul li {
 all: unset;
 padding: 2px 20px;
 cursor: pointer;
}

.nav ul li a {
  all: unset;
  display: block;
  color: #AFBDD5;
  font-family: Sans-Serif;
}

.nav ul li a:hover, .nav ul li a:focus, a:hover, a:visited, details summary:hover {
 font-weight: bold;
 text-decoration: none;
 color: #AFBDD5;
 border-bottom: 1px solid;
}


@media screen and (max-width: 480px) {

    
    .nav {
      float: left;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    
    .nav ul li a {
      float: left;
      display: inline;
      color: #AFBDD5;
      text-align: center;
      padding: 10px;
      background-color: #010B14;
      border: 1px solid #FBFEF9;
      margin-right: 5px;
      margin-bottom: 5px;
    }

    .nav ul li a:hover, .nav ul li a:focus, a:hover, a:visited, details summary:hover {
      border-bottom: none;
    }

}

        <div class="nav">
          <ul>
          
          <li><a href="index.html">Home</a></li>
          
          <li><a href="teaching.html">Teaching</a></li>
          
          <li><a href="publications.html">Publications</a></li>
          
          <li><a href="resources.html">Resources</a></li>
          
          <li><a href="cv.html">CV</a></li>
          
          <li><a href="student-work.html">Borrowed Plumes</a></li>
          
          <li><a href="contact.html">Contact</a></li>
          
          </ul>
        </div>

Answer 1

您应该尝试 display: flex 和 align-items、justify-content 属性。

点击这些链接了解更多信息。

Answer 2

看看这个。不要使用 float 而是使用 flex。

 .nav {
        padding-left: 10px;
      }

      .nav ul {
        all: unset;
        list-style-type: none;
        margin: 0;
        padding: 5px 0 10px 5px;
        display: flex;
        flex-direction: column;
      }

      .nav ul li {
        all: unset;
        padding: 2px 20px;
        cursor: pointer;
      }

      .nav ul li a {
        all: unset;
        display: block;
        color: #afbdd5;
        font-family: Sans-Serif;
      }

      .nav ul li a:hover,
      .nav ul li a:focus,
      a:hover,
      a:visited,
      details summary:hover {
        font-weight: bold;
        text-decoration: none;
        color: #afbdd5;
        border-bottom: 1px solid;
      }

      @media screen and (max-width: 480px) {
        .nav {
          margin-top: 10px;
          margin-bottom: 10px;
        }

        .nav ul li a {
          color: #afbdd5;
          text-align: center;
          padding: 10px;
          background-color: #010b14;
          border: 1px solid #fbfef9;
          margin-right: 5px;
          margin-bottom: 5px;
        }
        .nav ul {
          flex-direction: row;
          flex-wrap: wrap;
        }

        .nav ul li a:hover,
        .nav ul li a:focus,
        a:hover,
        a:visited,
        details summary:hover {
          border-bottom: none;
        }

    <div class="nav">
      <ul>
        <li><a href="index.html">Home</a></li>

        <li><a href="teaching.html">Teaching</a></li>

        <li><a href="publications.html">Publications</a></li>

        <li><a href="resources.html">Resources</a></li>

        <li><a href="cv.html">CV</a></li>

        <li><a href="student-work.html">Borrowed Plumes</a></li>

        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>

水平导航栏的元素不顶部对齐

Elements of horizontal navbar do not top align

html

css

navbar