Hugo站点中details展开时锚点定位的CSS修复方案问询

问题描述 #

开发Hugo站点时，希望details元素（"abstract"可展开摘要）与PDF链接锚点（"paper"、"slides"）始终并排显示且样式统一。但details展开后，锚点会被挤到摘要文本下方，需让锚点保持初始位置。

解决方案 #

核心思路是让details与锚点元素始终对齐顶部，避免details展开后的高度变化影响锚点布局，同时调整结构确保摘要内容不干扰行内元素排列。

步骤1：调整HTML结构 #

将details与锚点包裹在一个容器中，强化行内元素的布局关联性：

## working papers

1. **A dynamic spatial knowledge economy** (JMP) <br>
    <div class="action-group">
        <details>
            <summary>abstract</summary>
            Cities have long been thought to drive economic growth. ...
        </details>
        <a href="/files/p-dske_paper.pdf" class="button">paper</a>
        <a href="/files/p-dske_slides.pdf" class="button">slides</a>
    </div>

步骤2：修改CSS代码 #

通过vertical-align: top确保details和锚点始终顶部对齐，同时优化details展开后的样式：

/* 新增容器样式 */
.action-group {
    margin-bottom: 1em;
}

details {
    display: inline-block;
    vertical-align: top; /* 关键：保持顶部对齐，避免高度变化挤走按钮 */
}

summary {
    background-color: #EBEBEB;
    border: none;
    color: #2774AE;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block; /* 改为inline-block确保与按钮对齐 */
    font-size: 12px;
    margin: 1px;
    border-radius: 10px;
    cursor: pointer;
}

summary:hover {
    background: #FFC72C;
}

details>summary {
    list-style: none;
}

details>summary::-webkit-details-marker {
    display: none;
}

details[open] summary {
    margin-bottom: 0.5em; /* 展开后与摘要内容保持间距 */
}

.button {
    background-color: #EBEBEB;
    border: none;
    color: #2774AE;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 1px;
    border-radius: 10px;
    vertical-align: top; /* 关键：与details顶部对齐 */
}

.button:hover {
    background-color: #FFC72C;
    color: #2774AE;
}

效果说明 #

• 初始状态：summary与两个PDF按钮并排显示，样式统一。
• 展开状态：summary仍与按钮保持并排，摘要内容显示在它们下方，锚点位置完全不变。

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