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

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

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

이 문제를 해결하려면 추가 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>

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