如何使用CSS将5个导航列表标题设置为横向并排显示？

问题原因 #

• HTML中的viewport meta标签缺少闭合标记，可能导致移动端布局异常，建议补上>
• 错误将float属性写在<a>标签上，导航横向排列需要控制列表项<li>的布局
• 给<a>设置了height:3px的错误属性，导致文字显示异常
• 未清除<ul>标签默认的左内边距，也没有给父容器设置正确的布局属性
• CSS存在语法错误：存在无选择器的样式块，最后一个样式的position: e是非法属性值

实现方案（推荐Flex布局，无需处理浮动塌陷问题） #

直接替换你现有CSS文件的全部内容即可，可实现logo居左、导航项横向并排、每项间距32px的效果：

/* 全局清除浏览器默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #fff;
}

.logo {
  font-size: 22px;
  font-weight: 700;
  color: #222;
  text-decoration: none;
}

/* 导航ul的样式 */
.navigation {
  display: flex;
  list-style: none;
  gap: 32px; /* 导航项之间的间距 */
}

.navigation li a {
  color: #333;
  text-decoration: none;
  font-size: 16px;
}

/* 可选鼠标悬停效果 */
.navigation li a:hover {
  color: #1677ff;
}

兼容旧场景的float实现方案 #

如果需要兼容非常旧的浏览器，可使用以下float版本的CSS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  padding: 12px 24px;
  background: #fff;
  overflow: hidden; /* 清除浮动塌陷 */
}

.logo {
  float: left;
  font-size: 22px;
  font-weight: 700;
  color: #222;
  text-decoration: none;
  line-height: 2.8;
}

.navigation {
  float: right;
  list-style: none;
}

.navigation li {
  float: left;
  margin-right: 32px;
}

.navigation li:last-child {
  margin-right: 0;
}

.navigation li a {
  color: #333;
  text-decoration: none;
  font-size: 16px;
  line-height: 2.8;
}

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