이미지가 잘못된 위치에 나타납니다.

Question

각 줄 앞에 작은 이미지가 있기를 원하는 목록이 있습니다.

CSS의 :

.left div.arrow{background-image: url(../images/design/box.png); float:left; height:15px; width:15px; margin-right:2px;}

.left a.list:link, a:visited, a:active {color:black; font-size:0.8em; text-decoration:none; display:block; float:left;} 

html로 : 당신이 볼 수 있듯이

<div class="panel">My quick links</div> 
<div class="arrow"></div> 
<a href="/messages.php?p=new" class="list">Send a new message</a> 
<br /> 
<div class="arrow"></div> 
<a href="/settings.php#password" class="list">Change my password</a> 
<br /> 
<div class="arrow"></div> 
<a href="/settings.php#picture" class="list">Upload a new site image</a> 
<br /> 

는, 각각의 이미지가 작성되기 전에 가야한다. 첫 번째 줄에는 "새 메시지 보내기"라는 텍스트 앞에 이미지가 있습니다. 그러나 이후에는 각 줄 끝에 이미지가 있습니다. 그래서 "새 메시지 보내기"는 시작과 끝에서 이미지가 있습니다.

이미지가 이전 줄 끝에 머무르는 것과 같습니다. 아이디어가 있으십니까?

Answer 1

그것은 단지의 발전이 CSS에 나열된 특정 픽셀 수를 다운로드 플로트 취소하지 않습니다 < BR/> - 나는 8 개 픽셀 아래 거라 생각하고 그 분할에있는 15 픽셀 부동 배경 이미지를 삭제하지 않습니다 왼쪽.

당신은 < BR 스타일 같은 것을 필요 = "분명히 : 왼쪽"/ > 또는 < BR 스타일 = "분명히 : 모두"/ > 스타일 = "분명히 : 왼쪽"지난 부동 요소 아래에 진출하게됩니다.

의미론을 위해 LI를 블록으로 지정하고 배경 이미지를 가질 수 있습니다. ../images/design/box.png가 15 픽셀보다 큰 경우 오버플로 스타일을 사용해야합니다.

업데이트

.left div.arrow{clear:left; background-image: url(../images/design/box.png); float:left; height:15px; width:15px; margin-right:2px;} 

가 없음 의미가 될 것이다 솔루션

Answer 2

당신은 적은 작업을하고 링크 자체에있는 화살표를 통합 할 수 있습니다 : 당신이 잘 생긴 링크와 메뉴에 대한 특종을 원하는 참조하면

a.arrow { 
    background-image: url(../images/design/box.png); 
    float:left; 
    min-height:15px; 
    margin-right:2px; 
    display:block; 
    background-repeat:no-repeat; 
    background-position:0px 0px; 
    padding-right:20px 
    } 

: I love lists합니다.