한 줄에 배경 이미지가있는 UL LI

Question

까다로운 정렬 문제를 디버깅하고 있습니다. 다음은 jsfiddle입니다. 문제는 Rating "Thumbs"Up & Down이 단일 이미지에 있음을 나타냅니다. 다른 이미지를 생성하려면 background-position을 사용하고 있습니다.

시각적 모양이 잘 보이지만, 은 배경 이미지가있는 한 줄에 네 가지 기능을 모두과 함께 표시해야합니다.

누구든지 해결 방법을 알고 있습니까?

Answer 1

나는 당신이 당신의 등급 수업을 li의 실제 텍스트와 분리 된 범위에두고 싶다고 생각합니다.

<li><span class="rating up"></span>Courteous Staff</li> 

그런 다음 display: inline-block;로 범위를 설정하고 난 후 당신 무슨 생각을 얻어야한다.

http://jsfiddle.net/spacebeers/U2Wax/35/

당신은 잘 정렬 얻을 조금 더 많은 일을 할 필요가 있지만, 그것은 당신에게 좋은 아이디어를 줄 것이다.

Answer 2

이 CSS 스타일을 추가하려고 시도하셨습니까?

white-space: nowrap;