使用display:table系列属性时，如何将按钮垂直置于菜单标签下方？

给需要调整位置的.help元素添加一个自定义类（比如.help-below），然后通过以下CSS实现需求：

/* 核心样式：将目标help按钮改为块级元素，自动换行到label下方 */
.help-below {
  display: block;
  width: 100%; /* 确保按钮宽度与父容器一致，保持布局整齐 */
}

/* 可选：让对应的menu-label占满整行，避免右侧留白（需要浏览器支持:has选择器） */
.menu-label:has(+ .help-below) {
  width: 100%;
}

原理说明 #

原来的.menu-label和.help都是table-cell，在table-row类型的.menu-item中会横向排列。给目标.help设置display: block后，它会脱离表格的单元格布局规则，自动换行到前一个单元格（.menu-label）的下方。width: 100%是为了保证按钮宽度和父容器匹配，避免出现宽度收缩的问题。

如果需要兼容不支持:has选择器的旧浏览器，可以给对应的.menu-item也添加一个额外类（比如.menu-item-stacked），补充以下样式：

.menu-item-stacked .menu-label {
  width: 100%;
}

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