> 웹 프론트엔드 > CSS 튜토리얼 > CSS 그리드 레이아웃을 사용하여 테이블 형식에서 인라인 dt 및 dd 요소의 스타일을 지정하는 방법은 무엇입니까?

CSS 그리드 레이아웃을 사용하여 테이블 형식에서 인라인 dt 및 dd 요소의 스타일을 지정하는 방법은 무엇입니까?

Barbara Streisand
풀어 주다: 2024-11-11 19:00:03
원래의
909명이 탐색했습니다.

How to Style Inline dt and dd Elements in a Table Format Using CSS Grid Layout?

인라인 dt 및 dd 요소 스타일링

목표는 HTML 요소

그리고
각 dt와 해당 dd가 같은 줄에 표시되도록 테이블 형식으로 정렬합니다.

해결책: CSS 그리드 레이아웃

CSS 그리드 레이아웃은 그리드 구조의 요소를 정렬하기 위한 우아한 솔루션입니다. 원하는 레이아웃을 얻으려면 다음 단계를 따르세요.

  1. 상위
    그리드 레이아웃을 활성화하려면 요소를 "grid"로 설정하세요.
  2. grid-template-columns 속성을 사용하여 그리드 템플릿 열을 정의하세요. 이 경우 "max-content auto"를 사용하여
    요소는 고정된 너비를 차지하는 반면
    요소는 남은 공간을 차지합니다.
  3. grid-column-start 속성을 사용하여
    의 열 위치를 지정합니다. 그리고
    강요. 예를 들어
    에 대해 Grid-column-start: 1을 설정합니다. 요소 및 그리드 열 시작:
    에 대해 2

결과 CSS 코드는 아래 예와 유사해야 합니다.

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

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}
로그인 후 복사

이러한 스타일을 적용하면 제공된 HTML 코드가 각

및 해당
같은 줄에 표시되어 표와 같은 형식이 됩니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿