jQuery Tab 그림이있는 높이

Question

jQuery UI를 사용하여 탭 기능을 사용하여 멋진 3 탭 레이아웃을 얻고 있습니다. 탭 텍스트를 설명하는 각각의 < li> 요소 내에 텍스트가 있으면 모든 것이 효과적입니다. 탭 중 하나에 작은 아이콘이 있으면 매우 편리합니다. 이 아이콘은 탭의 기능을 명확하게하기 위해 만들어졌으며 3 개의 탭 중 단 하나의 아이콘 일 것입니다.

<li> 
    <a href="#stats"> <img src="Images/image.gif" style="border-style: none" />Tab Title</a> 
</li> 

그것은 작은 16px 키가 큰 이미지 : 다음과 같이 광고 항목을 내

나는 이미지를 추가 할 수 있습니다. 이미지가 잘 렌더링되지만 탭 하단과 내용 상단 사이의 간격이 느슨합니다. 사진이 없으면 이미지를 추가하자 마자 사라지는 작은 차이가 있습니다.

jQuery가 가장 큰 탭 높이의 크기를 알 수있게하여 모든 것이 일치하고 모든 탭간에 시각적으로 분리되도록 할 수있는 방법이 있습니까?

도움을 주신 모든 분들께 감사드립니다.

Answer 1

float: left 또는 position: absolute 이미지를 만들어 레이아웃에 영향을주지 않도록하십시오.

Answer 2

각 리 통해 루프 가능하여 그 높이를 얻을

var max_height = 0 
$('ul.tabs li').each(function() { 
    if ($(this).height() > max_height) max_height = $(this).height(); 
});