设置ul导航菜单横向排列时遇到问题，添加display: inline等属性不生效

问题根源 #

1. 仅对ul和a标签设置display: inline无效，中间层级的li元素默认是块级属性，每个li会独占一行
2. 给ul设置的固定宽度width: 200px远不足以容纳4个35px字号的导航项，就算调整了li属性也会被挤到下一行
3. 过大的line-height: 350%也会干扰布局效果

推荐解决方案（Flex布局，目前导航场景首选，不易出兼容问题） #

直接修改ul的CSS属性即可，无需调整现有HTML结构：

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  margin-left: -17px;
  /* 删除原有的display: inline、width:200px、line-height:350%属性，新增以下代码 */
  display: flex;
  gap: 20px; /* 可自定义调整导航项之间的间距 */
  align-items: center; /* 可选，让导航项垂直居中 */
}

li a {
  display: inline;
  color: #FFFFFF;
  padding: 15px;
  text-decoration: none;
  font-size: 35px;
  font-weight: 400;
}

li a.active {
  color: white;
}

li a:hover:not(.active) {
  color: #F39D2A;
}

如果需要让整个导航栏靠右对齐，给父容器.menu添加display: flex; justify-content: flex-end;属性即可，不需要使用float属性，float容易引发高度塌陷等额外布局问题，新手不推荐使用。

备选方案（inline-block实现，兼容更老的浏览器） #

如果不想用flex，给li元素添加行内块属性即可：

/* 新增li样式 */
li {
  display: inline-block;
}

同时删除ul原有width:200px的属性即可生效。

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