Home/ Questions/Q 6176329
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T00:04:57+00:00

I am trying to get the following code to work so that the list

  • 0

I am trying to get the following code to work so that the list items are evenly distributed.

    <html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" type="text/css" />

<style type="text/css"> 
    .wizard
    {
      background: #ccc;
      padding: 0;
      width: 1000px;
    }
    .wizard ul
    {
      list-style: none;
      margin: 0;
      padding: 0;
      text-align: justify;
    }
    .wizard ul li
    {
        display: inline;
    }
    .wizard ul li.wizard-img
    {
      visibility: hidden;
      overflow: hidden;
    }
    .wizard ul li.wizard-img img
    {
      height: 0px;
      width: 990px;
    }
</style> 

<script>
    $(function() {
        $( "#progressbar" ).progressbar({
            value: 60
        });
    });
    </script>
</head><body>
<div id="progressbar" style="width:1000px"></div>   
<div class="wizard">
    <ul><li>Item&nbsp;one</li><li>Item&nbsp;two</li><li>Item&nbsp;three</li><li>Item&nbsp;four</li><li>Item&nbsp;five</li><li class="wizard-img"><img/></li></ul>
</div>
</body>
</html>

Any ideas why it is not working?

Thanks

Paul

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Quasunk’s solution would center the elements, but it wouldn’t separate them by any space. So the elements at the ends of both sides wouldn’t be pushed up against the sides of their containing div.

    It might be necessary to use Javascript in this case. The JS would calculate the width of each li, subtract that from the width of the containing element, divide the result by the number of li elements – 1 (because that’s how many “gaps” you’ll have between the elements), and then apply that result as a margin-right to all but the last element.

    It’s a pretty simple calculation that would happen very quickly. But i’d recommend giving the container div a visibility:hidden property, and then showing it once the above calculations and CSS are finished. Just make sure you don’t start it off with display:none, because that would prevent the calculations from working at all (an element with display:none has no width, nor do its children).

    • 0