Can anyone help me solve the bug where the upper and lower lines of LI are misaligned. _html/css_WEB-ITnose

Looking at the picture,

The border of the thumbnail squeezes out the lower line. Is there any solution?


For details, please see http://zhixu.yuanma2.com/index.php?r=default/photo/content&id=12

Reply to discussion (solution)

Add a border to the picture.
li Add a style min-height:60px;

Borders cannot be added to pictures. Then all pictures will have borders. I only need to add borders to the selected picture.

Add a border to the picture.
li Add a style min-height:60px;
Borders cannot be added to pictures. Then all pictures will have borders. I only need to add borders to the selected picture.

Why not make the distance between the top and bottom larger?

#play_menu li a img{  border:0px;}#play_menu li.selected a img{  border:2px solid #e77927;}

$(function(){        count = $("#play_list .jqzoom").size();        $("#play_list .jqzoom:not(:first-child)").hide();     $("#play_menu li:first-child").css({"border":"2px solid #e77927"});        $("#play_menu li").click(function(){            var i = $(this).attr('alt') - 1;        n = i;        if (i >= count) return;        $("#play_menu li").removeClass("selected");        $(this).addClass("selected");        $("#play_list .jqzoom").filter(":visible").hide().parent().children().eq(i).fadeIn(500);             });        t = setInterval("showAuto()", 3000);     $("#play").hover(function(){ clearInterval(t) }, function(){t = setInterval("showAuto()", 3000);});})    

Your actual height is higher, so the following is Open

and add descending line-height