토스트 UI 홈페이지와 유사한 탐색 모음 만들기

Question

나의 영감의 원천

다음과 같은 탐색 모음을 만들고 싶습니다.

토스트UI 홈페이지

내가 무슨 짓을 한 걸까

이를 달성하기 위해 가능한 한 많이 복제하려고 노력합니다.

다음 메시지가 나타납니다.

나는 무엇을 원하는가

저는 이런 것을 원합니다(이미지 편집으로 만들었습니다):

选项1：居中对齐

选项2：左对齐

나는 그것을 포함하는 링크 그룹의 위치에 따라 연결된 목록의 위치가 동적으로 변하기를 원합니다. 내가 한 일은 왼쪽으로 정렬하는 것뿐이었습니다.

즉, 더 나은 UI를 위해 링크 목록이 해당 링크 그룹 바로 아래에 있도록 하고 싶습니다.

내 코드와 상자를 편집하여 이를 얻는 방법을 알려주실 수 있나요?

Answer 1

link-list 的 paddingLeft link-group의 x 좌표를 설정하세요

1. GetElementById 사용

으아아아

2. link-list을 컴포넌트로 분리하고 linkGroupId를 props로 받습니다. 그리고 link-list 的 paddingLeft link-group
의 x 좌표를 설정합니다.

으아아아

3. 설정 link-groupId

으아아아

그러면 option2를 얻을 수 있었습니다.

"LinkList"가 오버플로되면 "LinkList"가 ".link-list-box"를 채울 때까지 래핑하지 않는 것이 가장 좋으며 왼쪽 패딩은 자연스럽게 감소합니다. 하지만 어떻게 해야 할지 모르겠습니다.