CSS - 텍스트와 함께 인라인 개체 차단

Question

자세한 정보를 표시하려면 탭 내의 동적 텍스트 조각과 나란히 이동하려면 확장 아이콘이 필요합니다. 펼치기 아이콘에는 배경 이미지가 있으므로 블록으로 표시해야합니다. 클릭하면 클래스가 적용되어 배경 이미지가 마이너스로 바뀌고 링크 아래의 텍스트가 표시됩니다.

동적 텍스트의 왼쪽에 5px 크기의 아이콘을 표시 할 수있는 방법이 있습니까? 그렇다면 여전히 배경 이미지를 볼 수있는 블록이 될 수 있습니까?

내 HTML은 아래에 있습니다. 탭에는 별도 기능이있는 체크 상자가 있습니다.

<div class="expandLinkWO">Cardio &amp; Arms<span class="plusCircle btn"><span></span>  </span> <span class="tickBox"></span> 

Answer 1

. 또는 단추를 움직일 수 있습니다. 둘 다 작동해야합니다.

인라인 버전

.plusCircle { 
    display:inline-block; 
    vertical-align: top; 
    margin-right: 5px; 
} 

플로트 버전 :

.plusCircle { 
    display:block; 
    float:left; 
    margin-right: 5px; 
} 

내가 인라인 블록 방법은 좋네요 생각하지만, IE와 인라인 블록이 최고 아니다 친구의 ..

Answer 2

당신은 아마 inline-block이 필요합니다 : 당신은 당신이 원하는 않는, 인라인 블록을 사용할 수

.plusCircle { 
    background: url(your/img/url.jpg); 
    height: 20px; 
    width: 20px; 
    display: inline-block; 
    margin-left: 5px; 
}