inline-block쓸 때 양쪽 정렬하기

김재범·2022년 11월 29일
0

📌 inline-block

무한스크롤을 구현할 때 레이아웃을 만들고 브라우저 너비를 채우고 줄바꿈 되게 하려고
inline-block을 사용했었다.

위와 같이 양쪽 정렬을 하고 싶어서 아래와 같이 css를 작성했는데

export const MatchList = styled.div`
  display: inline-block;
  width: 710px;
  height: 184px;
  background: #f7f7f7;
  font-size: 24px;
  padding-left: 34px;
  margin-top: 20px;
  margin-right: 10px;
`;

margin-right를 주었기 때문에 오른쪽 부분도 여백이 발생했다

이를 해결하기 위해 inline-flex나 다른 방법을 찾아보았지만, 해결되지 않았고
동료의 조언을 받아서 :nth-child() 방법을 알게 되었다.

CSS :nth-child() 의사 클래스는 형제 사이에서의 순서에 따라 요소를 선택합니다.

/* 목록의 두 번째 <li> 선택 */
li:nth-child(2) {
  color: lime;
}
/* 임의의 그룹에서 네 번째에 위치하는 모든 요소 선택 */
:nth-child(4n) {
  color: lime;
}

출처: https://developer.mozilla.org/ko/docs/Web/CSS/:nth-child

그래서 위의 코드에서 margin값을 없애고 짝수번째만 margin값을 받도록 만들었다.

  :nth-child(even) {   // even 대신 2n도 가능
    margin-left: 20px;
  }

해결 완료!

profile
지식을 쌓고 있습니다.

0개의 댓글