인라인 그리드 레이아웃을 사용하여 정의 목록의 `dt` 및 `dd` 요소를 수평으로 정렬하려면 어떻게 해야 합니까?

dt 및 dd 요소에 대한 인라인 그리드 레이아웃 구현

정의 목록(

)에서 용어(< dt>)는 정의(

) 위에 표시됩니다. 이러한 요소를 인라인으로 정렬하기 위해 CSS 그리드 레이아웃을 활용할 수 있습니다.

그리드 레이아웃은 웹페이지에서 요소의 레이아웃을 정의하는 다양한 접근 방식을 제공합니다. 이를 통해 콘텐츠를 열과 행으로 배포하고 각 그리드 영역의 크기를 지정할 수 있습니다.

dt 및 dd 요소에 대한 인라인 그리드를 생성하려면 다음 CSS를 사용합니다.

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

로그인 후 복사

이 경우:

• 디스플레이: 그리드; dl 요소를 그리드 컨테이너로 설정합니다.
• grid-template-columns: max-content auto; 그리드에 대한 두 개의 열을 정의합니다. 첫 번째 열은 내용에 따라 너비가 자동으로 조정되고, 두 번째 열은 나머지 공간을 채웁니다.
• grid-column-start: 1; 그리드의 첫 번째 열에 dt 요소를 배치합니다.
• grid-column-start: 2; dd 요소를 그리드의 두 번째 열에 배치합니다.

이 그리드 레이아웃을 구현하면 dt 및 dd 요소가 가로로 표시되며 각 쌍은 단일 행을 차지합니다. 이렇게 하면 용어와 정의가 원하는 대로 정렬됩니다.

위 내용은 인라인 그리드 레이아웃을 사용하여 정의 목록의 `dt` 및 `dd` 요소를 수평으로 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!