如何将导航栏Logout元素右对齐并消除底部多余空白

问题原因 #

现有代码失效、出现多余空白的核心原因有两点：

• #nav-left、#nav-right默认是块级元素，会各自独占一整行，仅给#nav-right设置text-align: right无法让它和左侧导航项同排显示
• 浏览器对<ul>、<li>标签自带默认的内外边距、列表样式，且<li>默认纵向块级排列，这是底部出现多余空白、排版错位的主要来源

修复实现 #

原有HTML结构无需调整，只需要修改CSS代码即可，核心是用Flex布局实现导航栏左右分栏，同时清除浏览器默认列表样式：

#nav {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  background-color: #1c1c1c;
  /* 弹性布局实现左右两栏同排、两端对齐 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* 清除ul默认的内外边距和列表前缀 */
#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 让导航项横向排列，消除默认块级属性带来的多余空隙 */
#nav li {
  display: inline-block;
  padding: 12px 16px;
  color: #ffffff;
}

原有代码中为#nav-left、#nav-right设置的text-align属性可以直接删除，Flex布局的justify-content: space-between已经自动实现左栏靠左、右栏靠右的对齐效果。后续如果需要调整导航栏高度、导航项的点击热区大小，直接修改#nav li的padding值即可，不会再出现底部多余空白的问题。

异常效果参考 #

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