CSS를 사용하여 이름 목록의 수직 배열을 우아하게 구현하는 방법은 무엇입니까?

우아한 CSS 이름 목록 수직 배열 체계

이 기사는 CSS를 사용하여 이름 목록의 수직 배열을 우아하게 구현하는 방법을 소개합니다.

<code>姓名:张三李四王二麻</code>

구현의 핵심은 Flexbox 레이아웃을 사용하는 것입니다. 우리는 각각 두 개의 Flex 컨테이너의 하위 요소에 "이름 :"및 이름 목록을 배치하고 Flex 컨테이너 특성을 조정하여 예상 결과를 쉽게 달성합니다.

다음 코드는 깨끗한 HTML 구조 및 Flexbox를 사용 하여이 레이아웃을 구현하는 방법을 보여줍니다.

<div style="display: flex;">
  <div>이름:</div>
  <div>
    <p>장 산</p>
    <p>Li Si</p>
    <p>왕 에르마</p>
  </div>
</div>

* {
  패딩 : 0;
  여백 : 0;
}

이 코드는 먼저 와일드 카드 * 사용하여 모든 요소의 내부 및 외부 마진을 재설정하여 기본 스타일이 레이아웃을 방해하지 않도록합니다. 조상<div> 플렉스 <code>display: flex; 로 설정<div> : 첫 번째는 "이름 :"을 표시하고 두 번째는 수직으로 정렬 된 이름 목록을 포함합니다 (각 이름에 대해<code><p> 패키지를 태그하고 줄을 감싸십시오). Flexbox의 기능은 복잡한 위치 계산없이 수평 및 수직 방향으로 요소 배열을 단순화합니다.</p> <p> 이 접근법을 통해 이름 목록의 원하는 수직 배열을 효율적으로 달성합니다. Flexbox의 강력한 레이아웃 기능은 코드를 간단하고 이해하기 쉽고 유지 관리 및 확장을 쉽게 만듭니다.</p>