为什么设置display:inline-block后两个无序列表无法同行显示？

• <li>默认是块级元素：你没有给li设置横向排列的属性，所有导航项都是垂直堆叠的，直接撑开了列表高度，也导致列表实际宽度超出你设置的200px限制。
• <ul>默认样式未重置：ul标签自带左内边距，会挤占你设置的200px宽度，导致内容溢出。
• inline-block空白间隙问题：两个ul在HTML中换行书写，inline-block元素之间会默认产生几像素的空白间隙，两个200px宽度的列表加margin加间隙，总宽度超过父容器宽度后就会自动换行。
• 宽度设置不合理：你给a标签设置了左右各2em的内边距，18px字号下单侧内边距就有36px，单个导航项宽度接近100px，4个导航项总宽度远超过200px的固定限制，进一步挤压布局。

基于inline-block逻辑修改 #

/* 重置ul默认内边距和外边距 */
.navi ul {
  margin: 0;
  padding: 0;
}
/* 让li横向排列 */
.navi li {
  display: inline-block;
}
/* 消除inline-block元素间的空白间隙 */
.navi {
  font-size: 0;
}
/* 恢复a标签的字号 */
.navi a {
  font-size: 18px;
}
/* 去掉固定宽度，让列表自适应内容宽度，右列表浮动到右侧 */
.navi-left {
  width: auto;
  margin-right: 10px;
  background-color: red;
}
.navi-right {
  width: auto;
  float: right;
  margin-right: 10px;
  background-color: red;
}

Flex布局实现（更推荐，无需处理inline-block的兼容问题） #

直接给导航父容器设置flex属性，即可快速实现左右两端对齐：

/* 父容器设置flex布局，内容两端对齐，垂直居中 */
.navi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
/* 两个列表内部也用flex横向排列 */
.navi-left, .navi-right {
  display: flex;
  gap: 24px; /* 自定义导航项间距 */
  margin: 0;
  padding: 0;
  width: auto;
  background-color: red;
}
.navi li {
  list-style: none;
}

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