CSS list-style-image 태그에 문제가 있습니다. 내 목록 이미지가 크기가 큽니다. 뒤쪽에있는 텍스트가 스타일 태그의 아래쪽 부분으로 푸시됩니다. 그것은 다시 중간CSS list-style-image
에서이 같이 지금 비트 수정 :
| | | here
내가되고 싶은 :
| | here |
CSS list-style-image 태그에 문제가 있습니다. 내 목록 이미지가 크기가 큽니다. 뒤쪽에있는 텍스트가 스타일 태그의 아래쪽 부분으로 푸시됩니다. 그것은 다시 중간CSS list-style-image
에서이 같이 지금 비트 수정 :
| | | here
내가되고 싶은 :
| | here |
귀하의 질문이 좀 불분명하지만, 당신 같은 소리 배경 이미지를 봐야 할 수도 있습니다 r list-style-images보다 보충 (또는 보완).
문제의 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;
}
유일한 현실적인 방법 : 그래서이 같은 것을 사용
ul li {
background: transparent url(http://farm1.static.flickr.com/120/308863127_6eb1715f3b_m.jpg) 0 50% no-repeat;;
list-style-position: outside;
padding-left: 250px;
line-height: 160px; /* vertical height of image */
}
JS Fiddle demo합니다. 그러나 fail badly if the text of the li
wraps to a second (or third) line입니다.
는 vertical-align: middle;
(CSS)
목록 스타일 이미지를 설정 잊고 다음 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;
}
주 수직 정렬 스타일을 시도 위쪽으로 텍스트를 밀어 뺀 수치로 설정합니다.
| 또는 각각의 아래에, 내가 그것을 게시했을 때 어떻게 엉망이되었는지 몇 가지 : x – PRennings
나는 그 질문을 이해하는지 모르겠다. 더 자세히 설명해 주시겠습니까? 실제 코드 예제는 항상 도움이됩니다. –