如何将summary元素定位到右侧？求替代margin-left:calc的方案

你目前使用calc(100% - 15em)设置margin-left的方式虽能实现效果，但存在维护痛点——后续若调整summary宽度，必须同步修改calc内的数值。以下是几种更优的解决方案：

方案1：Flexbox布局（推荐） #

利用Flexbox的对齐属性直接将summary靠右，无需手动计算间距，适配性更强：

details {
  display: flex;
  justify-content: flex-end;
}
summary {
  padding: 0.2em 0.5em;
  width: 15em;
  background-color: #ddd;
}

优势：布局逻辑直观，父容器或summary宽度变化时，无需修改CSS数值，自动保持靠右对齐。

方案2：绝对定位 #

通过父元素相对定位+summary绝对定位实现靠右，适合需要精确控制位置的场景：

details {
  position: relative;
  min-height: 1.8em; /* 根据summary的内边距和字体大小调整，避免内容塌陷 */
}
summary {
  position: absolute;
  right: 0;
  padding: 0.2em 0.5em;
  width: 15em;
  background-color: #ddd;
}

注意：需给details设置最小高度，防止summary脱离文档流后父元素高度丢失。

方案3：Grid布局 #

借助Grid的justify-self属性快速实现单个元素的对齐，代码极简：

details {
  display: grid;
}
summary {
  justify-self: end;
  padding: 0.2em 0.5em;
  width: 15em;
  background-color: #ddd;
}

优势：语法简洁，Grid布局天生支持复杂排版需求，后续扩展更灵活。

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