헤더의 특정 링크 항목을 오른쪽으로 이동하는 방법?

개발
,
1

TC님, 잘 봤습니다! CSS로 .links 섹션을 오른쪽으로 이동하는 것에 대해 한 가지 질문이 있습니다. .nav .nav-pills에서 링크 하나를 오른쪽으로 옮기려고 시도해 보았지만 아직 성공하지 못했습니다. justify-content: right를 사용하면 .contents 전체를 이동시킬 수는 있지만, .links 섹션에는 적용되지 않습니다. 또한 헤더의 Flexbox 부분과 Flexbox가 아닌 부분 사이의 상호작용을 파악하지 못하고 있습니다.

Icons 섹션에는 아무것도 없지만, 왜 아이콘이 오른쪽에 위치하는지 이해하기 위해 아이콘을 설정해 보았지만, 여전히 그 이유를 알지 못하겠습니다.

링크를 오른쪽으로 이동시키는 간단한 CSS 스니펫을 아시는 분 계신가요?

2

마커스, 안녕하세요.
제 이해가 맞다면, 이 SCSS가 원하시는 작업을 수행할 것입니다:

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

image
image1362×126 9.61 KB

3

완벽하게 작동합니다. @Canapin 님 감사합니다!
해당 요소에 padding-left: auto는 시도해 봤지만, margin-left: auto는 시도하지 못했습니다! 제 CSS 실력이 아직 부족하네요.