无法修改HTML，如何用CSS实现标签页按钮居内容上方？

完全不用JavaScript，纯CSS就能搞定。核心是调整布局规则，避开order属性带来的宽度计算bug，给你两种可行方案：

方案一：Flex布局调整 #

1. 给tab容器设置弹性布局并允许换行：

.tab-container {
  display: flex;
  flex-wrap: wrap;
}

2. 让所有内容块占满整行，并且排在按钮后面：

.tab-content {
  width: 100%;
  order: 2;
  /* 这里添加你原来的内容样式，比如背景、内边距等 */
}

3. 让标签按钮排在内容前面，自动适配宽度：

.tab-btn {
  order: 1;
  /* 按钮样式示例：padding: 8px 16px; border: 1px solid #ccc; */
}

这样所有按钮会横向排列在内容上方，不会出现莫名其妙的缩进——本质是把内容块强制占满整行，避免按钮继承内容的宽度值。

方案二：Grid布局定位 #

如果觉得flex的order容易出问题，直接用grid更直观：

.tab-container {
  display: grid;
  /* 定义布局区域：第一行放按钮，下面各行对应内容 */
  grid-template-areas: 
    "tab1 tab2"
    "content1 content1"
    "content2 content2";
  /* 可给按钮行设置间距 */
  grid-gap: 8px;
}

/* 给每个元素分配对应区域 */
.tab-btn:nth-of-type(1) { grid-area: tab1; }
.tab-btn:nth-of-type(2) { grid-area: tab2; }
.tab-content:nth-of-type(1) { grid-area: content1; }
.tab-content:nth-of-type(2) { grid-area: content2; }

这种方式完全脱离order的限制，直接通过区域定位把按钮放在顶部，内容依次排在下面，彻底避免缩进问题。

你原来遇到的缩进，是因为用order调整顺序后，flex容器的宽度计算逻辑混乱，导致第二个按钮继承了第一个内容块的宽度值。上面两种方法都能绕开这个问题，不用改任何HTML代码。

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