CSS 그리드를 사용하여 `dt` 및 `dd` 요소의 스타일을 지정하여 같은 줄에 표시하려면 어떻게 해야 합니까?

CSS를 사용하여 같은 줄에 dt 및 dd 스타일 지정

CSS를 사용하여 스타일이 지정된 정의 목록(

)으로 작업할 때 용어를 표시하는 것이 바람직할 경우가 많습니다. (

) 및 해당 정의(

)를 같은 줄에 배치하여 용어를 한 열에 정렬하고 다른 정의. 이 레이아웃을 구현하기 위해 CSS 그리드의 기능을 활용할 수 있습니다.

CSS 그리드 레이아웃

CSS 그리드를 사용하면 요소를 열과 행 내에 배치할 수 있는 그리드 기반 레이아웃을 정의할 수 있습니다. . 이 접근 방식을 사용하면 기존 테이블 기반 레이아웃에 비해 요소 배치에 대한 더 큰 유연성과 제어가 가능합니다.

dl 예의 경우 Grid-template-columns 속성을 사용하여 두 개의 열이 있는 그리드를 정의합니다. dt 용어와 dd 정의에 대한 또 다른 용어입니다.

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

여기서 max-content는 첫 번째 열(dt 요소 포함)의 크기가 해당 열에 맞게 조정되어야 함을 나타냅니다. auto는 두 번째 열(dd 요소 포함)이 나머지 공간을 자동으로 채워야 함을 의미합니다.

dt 및 dd 요소가 동일한 줄에 배치되도록 하기 위해 Grid-column을 사용합니다. -start:

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

이 줄은 모든 dt 요소를 첫 번째 열에 배치하고 모든 dd 요소를 두 번째 열에 배치하여 원하는 인라인 레이아웃이 됩니다.

위 내용은 CSS 그리드를 사용하여 `dt` 및 `dd` 요소의 스타일을 지정하여 같은 줄에 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!