래핑된 글머리 기호 목록 항목이 들여쓰기되는 것을 방지하는 방법은 무엇입니까?

줄바꿈된 글머리 기호 목록 항목 들여쓰기

긴 목록 항목이 새 줄로 줄 바꿈되면 줄 바꿈된 부분이 들여쓰기되어 나타나는 것이 일반적입니다. 총알 기호 아래에 있습니다. 그러나 특정 시나리오에서는 줄 바꿈된 텍스트를 첫 번째 줄과 수직으로 정렬하는 것이 바람직할 수 있습니다.

이를 달성하려면 2레벨 컨테이너 구조를 사용하는 것이 좋습니다. 글머리 기호 기호를 자체 컨테이너에 넣고 목록 항목 텍스트 컨테이너 옆에 배치합니다. 이러한 컨테이너를 상위 컨테이너 내에 중첩하면 요소의 위치와 정렬을 제어할 수 있습니다.

.container-div {
    padding-left: 20px;
}

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

.row2 {
    overflow: hidden;
    max-width: 500px;
}

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!