子菜单menubutton的padding拉伸及margin异常问题求助

1. 修复子菜单按钮padding拉伸问题 #

子菜单按钮默认是块级元素（display: block），会自动撑满父容器（submenu）的宽度，导致padding向右拉伸。解决核心是让按钮宽度由内容决定：

/* 针对子菜单内的按钮 */
.submenu .menubutton1,
.submenu .menubutton2 {
  display: inline-block; /* 改为行内块元素，宽度由内容+padding决定 */
  padding: 10px; /* 明确设置上下左右10px内边距 */
  box-sizing: border-box; /* 确保padding不会额外增加元素总宽度 */
  white-space: nowrap; /* 防止文本换行，按钮宽度随文本自适应 */
}

同时检查子菜单（.submenu）的宽度设置，如果之前写了width: 100%，改成width: auto让它由内容决定宽度，避免强制撑大：

.submenu {
  width: auto;
  /* 如果是绝对定位的子菜单，补充以下属性确保定位正确 */
  position: absolute;
  left: 0;
  top: 100%;
}

2. 添加子菜单按钮的顶部margin #

直接给子菜单内的按钮设置顶部外边距即可，如果第一个按钮不需要和submenu顶部留间距，可以单独排除：

.submenu .menubutton1,
.submenu .menubutton2 {
  margin-top: 10px; /* 调整为你需要的间距大小 */
}

/* 移除第一个按钮的顶部margin，避免submenu顶部留白 */
.submenu .menubutton1:first-child {
  margin-top: 0;
}

或者也可以给submenu本身设置顶部内边距，效果类似：

.submenu {
  padding-top: 10px;
}

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