Question

I’m not sure if this is possible or not, but here’s roughly what I have:

<ul style="width:900px;">
  <li>Home</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
  <li>Page</li>
</ul>

There’s always a lot of empty space after the last list item. Would it be possible to automatically adjust the padding of the list items to fit the parent ?

Answer 1

Something like this might work (using jquery for convenience):

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<script>
    $(document).ready( function() {

    var total = $("li").size();
    // get the browser width
    var width = $(window).width();

    // determine width of each li
    var liWidth = Math.ceil(width / total);
    $("li").css('width', liWidth + 'px');
});
</script>