오늘 티스토리 스킨을 기본 스킨 중 하나인 #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