jQuery Tab Höhe mit einem Bild

Question

Ich benutze jQuery UI, um eine schöne 3 Registerkarte Layout mit ihrer Tabs-Funktion zu erhalten. Alles funktioniert gut, wenn ich in jedem der < li> -Elemente einen Text habe, der den Tab-Text beschreibt. Es stellt sich heraus, dass es sehr praktisch wäre, ein kleines Symbol auf einer der Registerkarten zu haben. Das Symbol wurde erstellt, um die Funktion der Registerkarte zu verdeutlichen, und es wäre nur eine der drei Registerkarten.

innerhalb der Zeile hinzufügen ich das Bild wie folgt:

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

Es ist ein kleines 16px hoch Bild ist. Das Bild wird zwar gerendert, aber es wird die Trennung zwischen dem unteren Rand der Registerkarte und dem oberen Rand des Inhalts aufgehoben. Ohne das Bild gibt es eine kleine Trennung, die weg ist, sobald ich das Bild hinzufüge.

Gibt es eine Möglichkeit, jQuery die Größe der größten Tab-Höhe kennen zu lassen, so dass alles übereinstimmt und ich diese visuelle Trennung zwischen allen Tabs bekommen kann?

Vielen Dank für die Hilfe!

Answer 1

Machen Sie das Bild float: left oder position: absolute, so dass es das Layout nicht beeinträchtigt.

Answer 2

Es ist möglich, durch jeden li Schleife und die Höhe davon bekommen mit

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