移动端水平导航栏元素无法顶部对齐如何解决

问题根因 #

• 你尝试添加的align: top不属于CSS合法属性，自然不会产生任何效果
• 小屏场景下你使用float: left实现导航项横向排列，浮动布局本身没有统一的元素对齐规则，文字长度不同导致元素高度有差异时，就会出现顶部错位的问题

修改方案 #

将媒体查询段的CSS代码替换为以下内容，改用Flex布局实现顶部对齐效果：

@media screen and (max-width: 480px) {
    .nav {
      float: left;
      margin-top: 10px;
      margin-bottom: 10px;
    }
    
    .nav ul {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 5px;
    }

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

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

规则说明 #

• 给ul添加display: flex启用Flex布局，align-items: flex-start是实现所有子元素顶部对齐的核心规则
• flex-wrap: wrap保证导航项一行放不下时自动换行，不会溢出屏幕
• 删掉了原来给a标签设置的float: left和display: inline规则，避免浮动布局影响对齐效果
• 重置了小屏下li的默认内边距，避免多余间距影响布局

内容的提问来源于stack exchange，提问作者Daniel Jach