# 如何将特定的链接项目移动到头部的右侧？

**URL:** <https://meta.discourse.org/t/how-to-move-a-specific-link-item-to-the-right-of-the-header/276422>\
**Category:** Development\
**Tags:** css, brand-header\
**Created:** [2023年八月22日 11:23 UTC](https://meta.discourse.org/t/how-to-move-a-specific-link-item-to-the-right-of-the-header/276422 "2023-08-22T11:23:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![pacharanero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pacharanero/32/500583_2.png) [@pacharanero](https://meta.discourse.org/u/pacharanero)\
**Post date:** [2023年八月22日 11:23 UTC](https://meta.discourse.org/t/how-to-move-a-specific-link-item-to-the-right-of-the-header/276422/1 "2023-08-22T11:23:26Z")

</div>

很棒的 TC，关于使用 CSS 将 `.links` 部分移到右侧，我有一个快速的问题。我一直试图将 `.nav .nav-pills` 中的单个链接移到右侧，但未能成功。我可以使用 `justify-content: right` 移动整个 `.contents`，但这不适用于 `.links` 部分，而且我无法弄清楚 Flexbox 和标题的非 Flexbox 部分之间的相互作用。

我在 Icons 部分没有任何内容，但我确实尝试配置了一个图标，以了解它们为何在右侧，但不知何故我仍然不明白。

有人有将 Links 移到右侧的简单 CSS 代码片段吗？

---

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [2023年八月23日 14:34 UTC](https://meta.discourse.org/t/how-to-move-a-specific-link-item-to-the-right-of-the-header/276422/2 "2023-08-23T14:34:28Z")

</div>

你好 Marcus，  
如果我理解正确，这段 SCSS 应该能实现你想要的效果：

```scss
.b-header nav.links {
    .nav-pills,
    & {
        display: flex;
        flex: 1;
        li:last-child {
            margin-left: auto;
        }
    }
}

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/9/c/e9c7d7d9e5960f9e4d3e7d86b11476d79521cb20.png)

---

<div class="post-metadata">

**Author:** ![pacharanero](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pacharanero/32/500583_2.png) [@pacharanero](https://meta.discourse.org/u/pacharanero)\
**Post date:** [2023年八月24日 09:33 UTC](https://meta.discourse.org/t/how-to-move-a-specific-link-item-to-the-right-of-the-header/276422/3 "2023-08-24T09:33:54Z")

</div>

完美运行，谢谢 @Canapin！  
我曾尝试在相关元素上设置 `padding-left: auto`，但没有设置 `margin-left: auto`！我的 CSS 功力不够深厚。

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2023年九月23日 09:34 UTC](https://meta.discourse.org/t/how-to-move-a-specific-link-item-to-the-right-of-the-header/276422/4 "2023-09-23T09:34:35Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.