# 如何将头像位置反转到主题文本前面？

**URL:** https://meta.discourse.org/t/how-to-reverse-the-position-of-the-avatar-to-be-in-front-of-the-topic-text/383401
**Category:** Support
**Created:** [2025 年9 月 20 日 18:22 UTC](https://meta.discourse.org/t/how-to-reverse-the-position-of-the-avatar-to-be-in-front-of-the-topic-text/383401 "2025-09-20T18:22:02Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [2025 年9 月 20 日 18:36 UTC](https://meta.discourse.org/t/how-to-reverse-the-position-of-the-avatar-to-be-in-front-of-the-topic-text/383401/2 "2025-09-20T18:36:08Z")

</div>

您好，欢迎来到 Discourse！

这是一个出乎意料的难题：它使用了 table 元素，并且在不改变实际 HTML 结构的情况下，很难改变顺序。而改变结构本质上意味着用您自己的模板替换该组件，我强烈不建议您尝试这样做。

我快速尝试了一下，纯 CSS 有点可能实现，但实现效果不太稳健。

如果您想尝试：

```plaintext
.topic-list-item {
    position:relative;
}

.topic-list .posters {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 150px;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
    height: auto;
}

.topic-list .topic-list-data:first-of-type {
    padding-inline-start: 150px;
}

```

我建议您将其限制在桌面端使用！

---

_[View the full topic](https://meta.discourse.org/t/how-to-reverse-the-position-of-the-avatar-to-be-in-front-of-the-topic-text/383401)._