CSS 그리드 레이아웃을 사용하여 dt 및 dd 요소를 같은 줄에 정렬하는 방법은 무엇입니까?

dt 및 dd 요소를 같은 줄에 정렬

dt 및 dd 요소의 내용을 수평으로 정렬하여 각 정의 목록 쌍을 다음과 같이 허용합니다. 같은 줄에 상주하는 CSS 그리드 레이아웃은 효과적인 솔루션을 제공합니다.

CSS 그리드 레이아웃

테이블과 마찬가지로 그리드 레이아웃은 요소를 열과 열로 구성하는 기능을 제공합니다. 행. Grid-template-columns 속성을 활용하여 열의 크기를 정의할 수 있습니다.

예제 코드

원하는 레이아웃을 얻으려면 다음 단계를 따르세요.

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

이 코드에서:

• dl 요소에는 그리드 레이아웃이 제공됩니다.
• grid-template-columns는 두 개의 열을 정의합니다. 여기서 첫 번째 열은 최대값을 가집니다. dt 요소를 수용할 수 있는 콘텐츠 크기를 가지며, 두 번째 요소는 dd 요소에 맞게 너비가 자동으로 조정됩니다.
• dt 요소는 첫 번째 열(grid-column-start: 1)에 배치됩니다.
• dd 요소는 두 번째 열(grid-column-start: 2)에 배치됩니다.

결과

이 코드를 적용하면 제공된 HTML이 다음으로 변환됩니다. 각 dt 용어와 해당 dd 정의가 같은 줄에 정렬된 표 형식입니다.

위 내용은 CSS 그리드 레이아웃을 사용하여 dt 및 dd 요소를 같은 줄에 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!