为什么我的列表项之间有这么大的空间？

Question

我有一个自动换行的水平列表。我使用一些jQuery来保持li高度相等并且它有效 - 有点像。问题是它在列表项的行之间添加太多空间。

示例：http://ojospa.webez.net/about-ojo/photo-tour.html

以下是我的CSS列表：

ul.galleries { margin-left:0 ;
padding:12px 0 0 0 ;
list-style-type:none ;
overflow:hidden ;
}

.galleries li { display:inline-block ;
float:left ;
width:130px ;
padding:10px ;
font-size:13px ;
text-align:center ;
}

.galleries li img { padding:4px ;
width:120px ;
height:120px ;
border:1px solid #7a2120 ;
margin-bottom:2px ;
}

和我的jQuery：

$.fn.extend({
    equalHeights: function(){
        var top=0;
        var row=[];
        var classname=('equalHeights'+Math.random()).replace('.','');
        $(this).each(function(){
            var thistop=$(this).offset().top;
            if (thistop>top) {
                $('.'+classname).removeClass(classname); 
                top=thistop;
            }
            $(this).addClass(classname);
            $(this).height('auto');
            var h=(Math.max.apply(null, $('.'+classname).map(function(){ return $(this).outerHeight(); }).get()));
            $('.'+classname).height(h);
        }).removeClass(classname); 
    }      
});

$(function(){
  $(window).resize(function(){
    $('.galleries li').equalHeights();
  }).trigger('resize');
});

我无法弄清楚所有额外空间的来源。任何帮助都将非常感激。

谢谢！

辛西娅

Answer 1

您的<li>内嵌height似乎已设置为254px，请参阅下面的图片。

评论此行

$('.'+classname).height(h);

在此处查看结果：

Answer 2

您的脚本导致所有LI元素具有内联样式高度。看看来源，我可以看到......

我认为您对该jQuery插件的调用是这样设置的。当我尝试这个时，它就会消失。这意味着在应用以下样式时对内联样式没有影响。

.galleries li {
display: inline-block;
float: left;
width: 130px;
padding: 10px;
font-size: 13px;
text-align: center;
**height: auto !important;**
}

我不认为内联样式是一个更好的主意。尝试在此上下文中避免使用该插件。我不认为这里需要它。

Answer 3

好的，我解决了这个问题。我的jQuery让我变得太复杂了。以下是我最终做的事情，它完美地运作了：

$(document).ready(function(){
    var maxheight = 0;
    $('.galleries li').each(function(){
        if (maxheight < $(this).height()) {
            maxheight = $(this).height();
        }
    });
    $('.galleries li').height(maxheight);
});

感谢所有试图帮助我的人。我很感激！

辛西娅