래핑된 글머리 기호 목록 항목을 첫 번째 줄에 정렬하는 방법은 무엇입니까?

글머리 기호 항목의 두 번째 줄을 첫 번째 줄과 정렬

글머리 기호 목록 항목이 여러 줄에 걸쳐 있는 경우 줄 바꿈을 사용하는 것이 바람직한 경우가 많습니다. 아래에 나타나지 않고 첫 번째 줄에 맞춰 정렬합니다. bullet.

해결책:

이 정렬을 달성하려면 글머리 기호를 별도의 div로 나누고 글머리 기호와 텍스트를 모두 컨테이너 div에 래핑합니다.

.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;
}

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

이 예에서는

• container-div 글머리 기호의 여백을 만들기 위해 추가 패딩을 제공합니다.
• 글머리 기호는 위치: 절대값을 사용하여 컨테이너-div 내에서 절대 위치에 배치됩니다.
• 텍스트는 컨테이너-div 내의 row2 div에 배치됩니다.

이 접근 방식을 사용하면 글머리 기호 항목의 줄 바꿈된 줄이 원하는 대로 첫 번째 줄에 정렬됩니다.

위 내용은 래핑된 글머리 기호 목록 항목을 첫 번째 줄에 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!