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

开发
,
1

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

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

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

1 个赞
2

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

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

image
image1362×126 9.61 KB

3 个赞
3

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

2 个赞
4

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