使用CSS实现动态菜单项宽度自适应、等内边距且hover填充全部可用空间

问题原因 #

你当前代码的间距是通过ul的justify-content: space-around生成的元素外空隙，不属于li本身的区域，因此hover时的背景色无法覆盖这部分空间。

调整方案 #

修改CSS规则如下：

ul {
  width: 600px;
  display: flex;
  /* 移除justify-content: space-around，不再用外部空隙做间距 */
  border: 1px solid blue;
  list-style: none;
  padding: 0px;
}
li {
  border: 1px solid blue;
  flex: 1 1 auto; /* 按内容基础宽度比例分配容器剩余空间，内容越长占宽越多 */
  padding: 8px 12px; /* 统一所有菜单项的内边距，可根据需求调整数值 */
  text-align: center; /* 文本居中对齐，和你提供的示例效果一致 */
  cursor: pointer;
}
/* hover效果示例 */
li:hover {
  background-color: #cce4ff;
}

调整后所有li会自动撑满整个ul的可用宽度，内边距统一，hover时的背景色会完全覆盖单个菜单项分配到的全部空间，同时文本更长的菜单项会自动占据更多宽度，符合你的需求。

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