글머리 기호 목록에서 줄 바꿈된 텍스트를 올바르게 들여쓰는 방법은 무엇입니까?

줄 바꿈된 글머리 기호 목록 항목의 두 번째 줄을 들여쓰는 방법

글머리 기호 목록으로 작업할 때 목록 항목이 너무 길어질 수 있습니다. 다음 줄로 넘어간다는 것입니다. 기본적으로 감싸진 부분은 줄의 시작 부분과 정렬되어 깔끔한 모양을 만듭니다. 이 문제를 해결하기 위해 우리는 래핑된 부분이 글머리 기호 항목의 첫 번째 줄과 정렬되기를 원합니다.

이 질문에서 사용자는 동일한 문제에 직면합니다. "문제 내용" 섹션에 제공된 현재 코드는 원하는 들여쓰기를 달성하지 못합니다. 제안된 솔루션은 글머리 기호 항목을 글머리 기호용 div와 텍스트용 div로 나누는 것입니다. 그런 다음 이러한 div는 컨테이너 div에 래핑됩니다.

다음은 제안된 접근 방식을 사용하여 개선된 코드 조각입니다.

CSS

.container-div {
  padding-left: 20px;
  overflow: hidden;
  max-width: 500px;
}

.red-square-5 {
  position: absolute;
  width: 5px;
  height: 5px;
  margin-top: 0.5em;
  background: #f00;
}

HTML

<div class="container-div">
  <div class="red-square-5"></div>
  <div class="row2">
    Long long long long long long long long long long long long long long long long long long long long long long long long long title
  </div>
</div>

이 업데이트에서 코드에서 글머리 기호를 나타내는 빨간색 사각형은 절대적으로 위치하며 텍스트의 첫 번째 줄과 수직으로 정렬됩니다. 그러면 긴 텍스트가 컨테이너 div의 왼쪽 가장자리에 맞춰 자연스럽게 흐릅니다. 이 접근 방식은 글머리 기호 항목의 래핑된 부분에 대해 원하는 들여쓰기를 성공적으로 달성합니다.

위 내용은 글머리 기호 목록에서 줄 바꿈된 텍스트를 올바르게 들여쓰는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!