Home/ Questions/Q 8108897
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T01:15:12+00:00

I have a setup where i have a unordered list on a page with

  • 0

I have a setup where i have a unordered list on a page with x <li><a href="#">Link text</a></li>.

They are via CSS set to 50% width each, so that i have 2 items on each line.
My problem is that 2 links on one line, can vary in height as they have different link text.
My question is; how can i, via jQuery, set the same height for each (the a is styles with a border bottom, so it would look best if they alined) on the same line? But not all in the sections should have the same height, only on a “pr line” basis.

Hope it makes sence 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is the fiddle: http://jsfiddle.net/aSJSm/1/

    And here is the code:

    <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();​

    Make sure you included in $(document).ready(function(){}) and you have latest jquery.

    • 0