不使用绝对定位实现Tab链接在Tab内容上方水平对齐

算力阿峰

2026-8-28

问题解决方案

核心采用CSS Grid布局实现，无需调整DOM顺序、无需使用绝对定位，完美适配动态内容高度，不会出现内容溢出覆盖其他元素的问题。

实现逻辑

给Tab外层容器开启Grid布局，划分出自适应高度的上下两行：第一行放置Tab标签，第二行放置Tab内容
强制所有Tab链接元素排布到Grid第一行，浏览器会自动将同属第一行的元素横向排列
强制所有Tab内容块排布到Grid第二行并占满整行宽度，配合原有的显示/隐藏逻辑，同一时间仅展示激活状态的内容，容器高度自动随当前展示的内容高度适配

代码修改

仅需调整原有CSS代码即可，原有HTML结构、JS交互逻辑完全不需要改动，符合CMS的结构限制。

body {font-family: 'Arial', sans-serif;}

.accordion-tabs-minimal {
    width: 900px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    /* 开启Grid布局 */
    display: grid;
    grid-template-rows: auto auto;
    align-items: end;
}

.tab-link {
    display: inline-block;
    background-color: rgb(234, 234, 234);
    padding: 0.5rem 1rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    color: black;
    text-decoration: none;
    /* 强制所有Tab标签排布到第一行 */
    grid-row: 1;
}

.tab-active {
    background-color: #300b4c;
    color: white;
}

.tab-content {
    /* 强制所有内容块排布到第二行，占满容器整宽 */
    grid-row: 2;
    grid-column: 1 / -1;
}

[data-open="false"] {
    display: none;
}

[data-open="true"] {
    display: block;
    border-top: 1px solid lightgrey;
    padding: 1rem 0;
}