글머리 기호 목록에서 적절하게 들여쓰기된 줄 바꿈을 달성하려면 어떻게 해야 합니까?

글머리 기호 목록에서 들여쓰기된 줄 바꿈 달성

새 줄로 넘어가는 긴 글머리 기호 목록 항목을 처리할 때 연속되는 것이 바람직합니다. 첫 번째 줄과 수평으로 정렬합니다. 기본적으로 줄 바꿈된 텍스트는 글머리 기호 아래에 나타나 정렬되지 않은 모양을 만듭니다.

이 문제를 해결하려면 추가 div를 활용하는 접근 방식을 사용할 수 있습니다.

해결책

1. 총알을 Div:
   글머리 기호를 별도의
   요소는 절대 위치를 제공하고 글머리 기호의 모양과 일치하도록 여백을 조정합니다.
2. 두 Div를 모두 컨테이너 Div로 래핑합니다.
   컨테이너
   글머리 기호와 목록 항목 텍스트

   강요. 패딩 및 오버플로를 제어하는 ​​데 필요한 스타일을 적용합니다.
3. 목록 항목 텍스트 정렬:
   컨테이너 내에서 텍스트
   글머리 기호와 수평으로 정렬되도록 적절한 패딩이 있습니다.

코드 예

.row2 {
    padding-left: 20px;
    overflow: hidden;
    max-width: 500px; 
}
.red-square-5 {
    position:absolute;
    width:5px;
    height:5px;
    margin-top: 0.5em;
    background:#f00; 
}

<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>

이 접근 방식을 따르면 글머리 기호 목록은 글머리 기호 오른쪽으로 들여쓰기되어 첫 번째 줄에 정렬되고 가독성과 미적 측면이 향상됩니다. 목록.

위 내용은 글머리 기호 목록에서 적절하게 들여쓰기된 줄 바꿈을 달성하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!