导航栏列表元素无法从左到右横向排列该如何解决？

问题核心原因 #

• 选择器不匹配：CSS中使用ID选择器#navigation，但HTML里导航ul的属性是class="navigation"，类和ID选择器不互通，导致导航相关样式完全未生效
• li设置了绝对定位：你给li添加了position: absolute属性，所有未指定位置的绝对定位元素会堆叠在同一位置，破坏正常排列规则，即便设置了display: inline也不会生效

修复方案 #

你可以选择修改CSS选择器匹配现有HTML结构，修复后代码如下：

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

body header {
  top: 0;
  left: 0;
  display: flex;
  position: absolute;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 30px 100px;
}

/* 把ID选择器改为类选择器，匹配HTML的class属性 */
.navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  /* 可自行调整导航项之间的间距 */
  gap: 24px;
}

.navigation li {
  /* 父级已设为flex布局，默认横向排列子元素，无需额外设置display: inline，删除无效的绝对定位属性即可 */
}

如果你不想修改CSS，也可以直接修改HTML代码，把<ul class="navigation">改为<ul id="navigation">，同时删除li的position: absolute属性即可。

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