Program Tip

li의 두 번째 줄은 CSS 재설정 후 글 머리 기호 아래에서 시작합니다.

programtip 2020. 11. 6. 19:04
반응형

li의 두 번째 줄은 CSS 재설정 후 글 머리 기호 아래에서 시작합니다.


ulCSS 재설정을 적용한 후 -list에 문제가 있습니다.

의 텍스트 li가 길고 두 번째 줄로 나뉘면 글 머리 기호 아래에서 텍스트가 시작됩니다. 글 머리 기호 오른쪽에있는 텍스트와 동일한 여백 / 패딩으로 시작하고 싶습니다.

설명하기는 어렵지만 예제 이미지를 보면. 왼쪽 이미지가 오늘 목록입니다. "motta varsel [...]"은 글 머리 기호 아래에서 시작되지만 오른쪽 그림을보고 싶습니다.

CSS로 어떻게 할 수 있습니까? 내가 간과 한 매우 간단한 것이 있다고 생각하지만 무엇을 알 수 없습니다. Google 검색도 유용한 정보를 반환하지 않았습니다.

여기에 이미지 설명 입력


li태그라는 속성이 있습니다 list-style-position. 이렇게하면 글 머리 기호가 목록 안팎으로 표시됩니다. 기본적으로로 설정되어 inside있습니다. 그러면 텍스트가 그 주위를 감싸게됩니다. 로 설정하면 태그 outside텍스트 li가 정렬됩니다.

그 단점은 글 머리 기호가 ul. 다른 텍스트와 정렬하려면 여백을 사용할 수 있습니다.

ul li {
    /*
     * We want the bullets outside of the list,
     * so the text is aligned. Now the actual bullet
     * is outside of the list’s container
     */
    list-style-position: outside;

    /*
     * Because the bullet is outside of the list’s
     * container, indent the list entirely
     */
    margin-left: 1em;
}

2014 년 3 월 15 일 편집 사람들이 여전히 Google에서 들어오는 것을 보았습니다. 원래 답변이 약간의 개선이 필요할 것 같았습니다.

  • 솔루션 제공하도록 코드 블록 변경
  • 들여 쓰기 단위를 em's로 변경
  • 각 속성은 ul요소에 적용됩니다.
  • 좋은 의견 :)

다음은 좋은 예입니다 .

ul li{
    list-style-type: disc;
    list-style-position: inside;
    padding: 10px 0 10px 20px;
    text-indent: -1em;
}

실무 데모 : http://jsfiddle.net/d9VNk/


나는 Dipaks의 대답을 두 번째로 들었지만 더 나은 레이아웃 제어를 위해 ul을 배치하거나 배치하지 않을 수도 있으므로 종종 텍스트 들여 쓰기만으로 충분합니다.

ul li{
text-indent: -1em;
}

참고 URL : https://stackoverflow.com/questions/11556493/second-line-in-li-starts-under-the-bullet-after-css-reset

반응형