为什么侧边栏按钮出现层叠？如何实现按钮垂直排列且不换行

修复方案 #

你出现该问题的核心原因是.dropbtn对应的<a>标签默认是行内元素，会横向排列，且未设置换行控制、宽度规则，直接调整对应CSS即可：

1. 给按钮父容器.dropdown添加垂直弹性布局规则，控制按钮垂直排列和间距

.dropdown {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 可自行调整按钮上下间距大小 */
}

2. 修改.dropbtn的基础规则，适配需求

.dropbtn {
  background-color: #005687;
  color: white;
  padding: 10px;
  font-size: 15px;
  border: none;
  cursor: pointer;
  /* 新增规则开始 */
  display: block;
  width: 100%;
  box-sizing: border-box; /* 把padding计入宽度，避免撑破父容器 */
  white-space: nowrap; /* 强制不换行 */
  /* 以下为可选配置，内容过长时末尾显示省略号，不需要可以删掉 */
  overflow: hidden;
  text-overflow: ellipsis;
  /* 新增规则结束 */
}

修改完成后即可实现按钮垂直排列、内容过长不换行的需求，也不会再出现层叠重叠的异常。

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