2011-01-09 2 views
1

CSS list-style-image 태그에 문제가 있습니다. 내 목록 이미지가 크기가 큽니다. 뒤쪽에있는 텍스트가 스타일 태그의 아래쪽 부분으로 푸시됩니다. 그것은 다시 중간CSS list-style-image

에서이 같이 지금 비트 수정 :

 
| 
| 
| here 

내가되고 싶은 :

 
| 
| here 
| 
+0

| 또는 각각의 아래에, 내가 그것을 게시했을 때 어떻게 엉망이되었는지 몇 가지 : x – PRennings

+2

나는 그 질문을 이해하는지 모르겠다. 더 자세히 설명해 주시겠습니까? 실제 코드 예제는 항상 도움이됩니다. –

답변

0

귀하의 질문이 좀 불분명하지만, 당신 같은 소리 배경 이미지를 봐야 할 수도 있습니다 r list-style-images보다 보충 (또는 보완).

3

문제의 li 요소의 선 높이를 높이면됩니다.

#iconlist li { 
    line-height: 2em; 
} 

keithjgrant가 제안한 것처럼 배경 이미지를 대신 사용합니다. 목록 이미지는 여러 브라우저에서 일관성이 없습니다. 이 background-image 함께 달성하기 위해

#iconlist li { 
    padding-left: 22px; 
    background: url(20x20-icon.png) left center no-repeat; 
    line-height: 22px; 
    list-style: none; 
} 
0

vertical-align: middle; (CSS)

1

목록 스타일 이미지를 설정 잊고 다음 CSS를 사용 ...

ul#example li { 
    list-style-type: none; 
} 

/* create new marker */ 
ul#example li:before { 
    display: marker; 
    content: url("new_marker.png"); 
    /* set the following to fit your needs */ 
    vertical-align: 3px; 
    padding-left: 2px; 
    padding-right: 12px; 
} 

주 수직 정렬 스타일을 시도 위쪽으로 텍스트를 밀어 뺀 수치로 설정합니다.

Source of answer.