Question

我有一个设置，我在x <li><a href="#">Link text</a></li>.

页面上有一个无序列表

它们是通过CSS设置为每个50％的宽度，所以我每行有2个项目。我的问题是，一行上的2个链接的高度可能会有所不同，因为它们具有不同的链接文本。我的问题是;我怎么能通过jQuery为每一个设置相同的高度（a是具有边框底部的样式，所以如果它们在一起，它们看起来最好）在同一条线上？但并非所有部分都应具有相同的高度，仅在“pr line”的基础上。

希望它能够实现：）

Answer 1

您尝试实现的目标称为 网格布局 ， 变量行高 。在HTML中执行此操作的唯一方法是表元素。

如果你真的想要这样做，你将不得不在结果之美的祭坛上牺牲标记的语义。

您应该做的是创建一个两列表，并将以前的li元素的内容放在表的td元素中。使用td的vertical-align属性及其样式属性来满足您的设计需求。

Answer 2

这是小提琴：http://jsfiddle.net/aSJSm/1/

以下是代码：

<html>：

<ul>
<li><a href="javascript:void(0)">Item1 bla bla bla</a></li>
<li><a href="javascript:void(0)">Item2</a></li>
<li><a href="javascript:void(0)">Item3</a></li>
<li><a href="javascript:void(0)">Item4 ala bala bala</a></li>
<li><a href="javascript:void(0)">Item5</a></li>
<li><a href="javascript:void(0)">Item6</a></li>
<li><a href="javascript:void(0)">Item7</a></li>
<li><a href="javascript:void(0)">Item8</a></li>
</ul>

<css>：

ul{
 width: 200px;   
 float:none;
}
ul li a{
 width: 50%;   
 float: left;   
 border-bottom: 1px solid black;    
}

<javascript>：

var setList = function(){
    var listItems = $('ul').children();
    $.each(listItems, function(index){
        if (index % 2 == 0){
            var leftElementHeight = $(this).children('a').height();
            var rightElementHeight = $(this).next().children('a').height();
            if (leftElementHeight < rightElementHeight)
                $(this).children('a').css("height", rightElementHeight);
            else
                $(this).next().children('a').css("height", leftElementHeight);
        }    
    });
}
setList();

确保你包含在$（document）.ready（function（）{}）中并且你有最新的jquery。

Answer 3

如果你真的想在jQuery中这样做，你可以这样做：

$('li:even').each(function(){ 

    var leftHeight = $(this).height();
    var rightHeight = $(this).next().height();

    var newHeight = (leftHeight <= rightHeight) ? rightHeight : leftHeight;

    $(this).next().andSelf().height(newHeight);

});

JSFiddle：http://jsfiddle.net/svenhanssen/VEnXp/

Answer 4

为2个链接设置ID或类。并使用以下方法设置高度。

$("#id").css("height", '100px');

在列中创建2个相同高度的链接？

4 个答案: