# 如何将分类框移到顶部

**URL:** <https://meta.discourse.org/t/how-to-move-category-boxes-to-the-top/410585>\
**Category:** Support\
**Tags:** css, custom-category-boxes\
**Created:** [2026年八月20日 22:43 UTC](https://meta.discourse.org/t/how-to-move-category-boxes-to-the-top/410585 "2026-08-20T22:43:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)\
**Post date:** [2026年八月20日 22:43 UTC](https://meta.discourse.org/t/how-to-move-category-boxes-to-the-top/410585/1 "2026-08-20T22:43:36Z")

</div>

受到 Meta 新设计的启发，我尝试实现类似 Meta 品牌主题中子类别框的显示效果。

我最终得到了这个结果：

 ![moving-boxes](https://global.discourse-cdn.com/meta/original/4X/8/e/b/8eb952a0009ba05d8476df8497606e2571a0ac51.png)  
_我可以确认标签下拉菜单实际上是对齐的_ 😅

**我该怎么做才能实现这个效果？** 通过 CSS 或 JavaScript 可行吗？我可以部署自己的主题组件，并想了解相关方法。

顶部导航栏需要靠近主题（topics），而不是子类别（subcategories），所以对我来说，这个改动关乎用户体验，而不仅仅是细微的视觉布局调整。

---

<div class="post-metadata">

**Author:** ![darkpixlz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkpixlz/32/549896_2.png) [@darkpixlz](https://meta.discourse.org/u/darkpixlz)\
**Post date:** [2026年八月20日 23:11 UTC](https://meta.discourse.org/t/how-to-move-category-boxes-to-the-top/410585/2 "2026-08-20T23:11:32Z")

</div>

这_可能_不是用 CSS 就能实现的，但具体还要看你最初是如何实现这个首页的。你在重新设计首页时，有没有使用某个特定的组件？

---

<div class="post-metadata">

**Author:** ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)\
**Post date:** [2026年八月21日 00:26 UTC](https://meta.discourse.org/t/how-to-move-category-boxes-to-the-top/410585/3 "2026-08-21T00:26:20Z")

</div>

这不是主页，而是分类页面。我还在学习中，目前还没学会如何生成一个合适的主页。这是我待办事项之一 🙂

也许用 JavaScript 可以实现。看到主题组件能做的事情之多，我真的感到很惊讶。虽然没有技术背景，但我猜这里可能存在某种可能性。

---

<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:** [2026年八月21日 06:25 UTC](https://meta.discourse.org/t/how-to-move-category-boxes-to-the-top/410585/4 "2026-08-21T06:25:40Z")

</div>

> [@satonotdead](#):
>
> 被新的 Meta 设计搞得有点红，

Meta 主页是构建在 **`custom_homepage` 主题修改器 + 新的 Blocks API** 之上的，因此这是重现它的推荐方式。

如果仅使用 CSS，如果你能在父级包装器上应用网格（grid）或弹性布局（flex），也许可以重新排序，但这只是外观上的改变，而且很可能会变得一团糟。

---

<div class="post-metadata">

**Author:** ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)\
**Post date:** [2026年八月22日 16:13 UTC](https://meta.discourse.org/t/how-to-move-category-boxes-to-the-top/410585/5 "2026-08-22T16:13:03Z")

</div>

再次感谢！重新上手之后，我觉得问题并不在于新的主页设计，而在于核心行为，而这一点我理解是可以被广泛重新审视的。

> [@Discourse](#):
>
> 目前我们的 howto 分类正在使用“Boxes”样式。通过使用非常简短的分类描述，并为每个子分类添加徽标，效果如下：
> 
> ![Screen Shot 2017-03-17 at 2.59.13 PM.png](https://global.discourse-cdn.com/meta/original/3X/b/2/b258bb8c9ab32c8abd122061b558153f13d24d3e.png)

子分类显示在导航栏上方看起来好多了。对某些人来说，这可能纯粹是外观上的问题，但我发现子分类的方块会干扰日常的 UX 体验。

 ![](https://global.discourse-cdn.com/meta/original/4X/e/3/f/e3f078d24ff921fdcfa44e6cda89c50c1a6fbc87.png)

对此大家有什么看法吗？我的 CSS 技巧无法解决这个问题，而且我也明白用这种方式是行不通的。