>웹 프론트엔드 >CSS 튜토리얼 >CSS의 첫 줄에 래핑된 글머리 기호를 정렬하는 방법은 무엇입니까?

CSS의 첫 줄에 래핑된 글머리 기호를 정렬하는 방법은 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-12-05 03:31:10919검색

How to Align Wrapped Bullet Points with Their First Line in CSS?

줄바꿈된 글머리 기호 항목 줄을 첫 번째 줄에 정렬하는 방법

글머리 기호 목록을 생성할 때 줄바꿈된 항목을 첫 번째 줄에 정렬하는 것이 바람직한 경우가 많습니다. 첫 번째 줄. 글머리 기호 아래를 감싸는 대신 감싸인 부분이 글머리 기호 오른쪽에서 계속되어야 합니다.

CSS 및 HTML 구현:

이 정렬을 달성하려면 글머리 기호를 묶습니다. 별도의 div 요소에 추가하고 두 div를 컨테이너 div 안에 래핑합니다.

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

이 접근 방식을 사용하면 글머리 기호 위치는 절대적으로 유지되지만 글머리 기호 항목은 텍스트가 글머리 기호 오른쪽으로 줄바꿈됩니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.