使2列鏈接的高度相同？

我有一個設置在那裏我有x <li><a href="#">Link text</a></li>.使2列鏈接的高度相同？

頁面上的無序列表他們是通過CSS設置爲各50％的寬度，讓我對每行2項。我的問題是，在一條線上的2個鏈接，因爲它們有不同的鏈接文本，可以在高度上有所不同。我的問題是;我怎麼能通過jQuery爲同一行設置相同的高度（a是具有邊框底部的樣式，所以它看起來最好，如果它們相同）？但是並不是所有的部分都應該具有相同的高度，只能在「pr line」的基礎上。

希望它能讓sence :)

來源

2012-06-21 brother

這是小提琴：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-21 09:32:49

偉大的作品 - thx！ :) – brother

-1

設置2個鏈接的Id或類。並使用以下方法設置高度。

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

來源

2012-06-21 09:17:20 Ajai

他說，該列表中的項目有不同的高度。 –

你所試圖實現被稱爲網格佈局與可變行高度。而在HTML中完成此操作的唯一方法是表格元素。

如果你真的想這樣做，你將不得不犧牲你的標記在結果之美的祭壇上的語義。

您應該做的是創建一個兩列表格，並將您以前的li元素的內容放在表格的td元素中。使用td的垂直對齊屬性及其樣式屬性來匹配您的設計需求。

來源

2012-06-21 09:30:00

我擺弄了一段時間的JavaScript解決方案，它的作品，但這是最優雅的答案。 –

如果你真的想這樣做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-21 09:54:44 sven

使2列鏈接的高度相同？

回答

相關問題