li의 두 번째 줄은 CSS 재설정 후 글 머리 기호 아래에서 시작합니다.
ul
CSS 재설정을 적용한 후 내 -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;
}
'Program Tip' 카테고리의 다른 글
파이썬에서 문자열을 제목 대소 문자로 변환하는 방법은 무엇입니까? (0) | 2020.11.06 |
---|---|
Python으로 Google 스프레드 시트에 액세스 (읽기, 쓰기)하려면 어떻게하나요? (0) | 2020.11.06 |
--resource-rules는 mac os x> = 10.10에서 더 이상 사용되지 않습니다. (0) | 2020.11.06 |
테스트 조치에 대해 구성표가 구성되지 않았습니다 (iOS xcode 프로젝트). (0) | 2020.11.06 |
"width : -moz-fit-content;"에 대한 CSS 교차 브라우저 값이 있습니까? (0) | 2020.11.06 |