移动端水平导航栏对齐异常：640px及以下宽度时中间列表上浮

问题原因 #

错位是由两个核心问题导致的：

• 导航链接a设为inline-block后，默认垂直对齐规则是baseline，当中间链接的文字因为内容较长、宽度不足出现换行时，就会和其他单行文字的链接出现基线错位，触发上浮偏移
• ul设置了多余的float: left属性，加上viewport元标签存在拼写错误，进一步放大了小屏适配的异常

修复方案 #

第一步：修复viewport拼写错误 #

把head里的viewport标签里的多余空格去掉，修改为：

<meta name="viewport" content="width=device-width, initial-scale=1">

第二步：调整移动端CSS规则 #

修改@media screen and (max-width:640px)里的对应属性，调整后的完整CSS如下：

@media screen and (max-width:640px) {
  header {
    border-style: solid;
    color: black;
  }
  h1,
  h2,
  h3,
  section {
    text-align: center;
  }
  nav {
    text-align: center;
  }
  ul {
    text-align: center;
    /* 去掉多余的float: left */
    width: 100%;
    padding: 0;
    list-style-type: none;
  }
  ul li {
    display: inline;
  }
  a {
    display: inline-block;
    width: 150px;
    height: 35px;
    text-decoration: none;
    color: white;
    background-color: #808080;
    border: 1px solid black;
    /* 新增两个属性解决对齐问题 */
    vertical-align: top;
    line-height: 35px;
  }
  a:hover {
    background-color: black;
  }
}

如果想让小屏的文字不换行，也可以把a的宽度调整为auto，左右加padding适配内容长度即可。

内容的提问来源于stack exchange，提问作者Tuan Dat