본문 바로가기

[CSS] 목록요소, 리스트 태그(ul, ol, dl 태그)에서 줄바꿈이 삽입되는 경우

2018.12.02 댓글 0

오늘 티스토리 스킨을 기본 스킨 중 하나인 #1으로 바꾸고 사이드바를 억지로 추가했습니다.

그리고 '최근 댓글' 위젯을 만들어서 사이드바에 배치했습니다. 하지만 이상하게 IE에서 불릿과 텍스트 사이에 줄바꿈이 삽입되는 현상이 나타났습니다.

구글 크롬이나 Opera 등 다른 브라우저에서는 이상이 없었습니다. 이와 같이 예상치 않게 불릿 뒤에 줄바꿈이 삽입되는 경우 먼저 li 태그 내에 display:block 같은 속성이 적용되고 있지 않은지 확인해보면 좋을 것 같습니다.

이 문제를 해결하느라 시간을 조금 허비했습니다. 알고 보니 댓글 리스트에 링크되는 <a ...>태그 내에 display:block 속성이 추가되어 이런 문제가 발생했습니다.ㅠㅠ

이와 관련하여 How can I remove the line break occurs before and after an unordered list in HTML? 글에서는 li 요소에 display: inline이 적용되어야 한다고 설명하고 있습니다.

ul li { display: inline; }

항상 그렇듯이 알고 보면 간단한 데 말입니다.

참고로 리스트 불릿으로 FontAwesome 폰트를 사용하려는 경우 다음과 같은 코드를 이용할 수 있습니다.

ul {
  list-style: none;
  padding: 0;
}
li {
  padding-left: 1.3em;
}
li:before {
  content: "\f00c"; /* FontAwesome 유니코드 */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* li에 설정된 padding-left와 동일   */
  width: 1.3em; /* li에 설정한 padding-left와 동일 */
}
// 출처: Custom li list-style with font-awesome icon

리스트 태그가 아닌 div 등의 태그에 list-style-type 스타일을 적용하려면 다음과 같은 코드를 이용할 수 있습니다.

div {
  display: list-item;
  margin-left: 1.3em;
  list-style-type: circle;  
}
// 출처: Can I use list-style-type to div tag?

예시: jsfiddle

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글0