0

我有一个设置，我在页面上有一个无序列表x <li><a href="#">Link text</a></li>.

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

希望它有意义:)

4

4 回答 4

2

您要实现的称为具有可变行高的网格布局。在 HTML 中做到这一点的唯一方法是 table 元素。

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

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

于 2012-06-21T09:30:00.120 回答
0

这是小提琴：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。

于 2012-06-21T09:32:49.157 回答
0

如果你真的想在 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/

于 2012-06-21T09:54:44.453 回答
-1

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

$("#id").css("height", '100px');
于 2012-06-21T09:17:20.617 回答