动态居中和分布水平ul答案

【问题标题】：Centering and distibuting a horizontal ul dynamically动态居中和分布水平ul
【发布时间】：2011-07-23 22:45:48
【问题描述】：

我正在尝试使以下代码正常工作，以使列表项均匀分布。

    <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>

任何想法为什么它不起作用？

谢谢

保罗

【问题讨论】：

标签： jquery html css jquery-ui

【解决方案1】：

Quasunk 的解决方案将元素居中，但不会用任何空格分隔它们。所以两边的元素不会被推到它们包含的 div 的边上。

在这种情况下可能需要使用 Javascript。 JS 将计算每个 li 的宽度，从包含元素的宽度中减去它，将结果除以 li 元素的数量 - 1（因为这是元素之间的“间隙”数），然后将该结果作为边距右应用于除最后一个元素之外的所有元素。

这是一个非常简单的计算，很快就会发生。但我建议给容器 div 一个可见性：隐藏属性，然后在上述计算和 CSS 完成后显示它。只需确保不要从 display:none 开始，因为那样会阻止计算工作（带有 display:none 的元素没有宽度，它的子元素也没有）。

【讨论】：

【解决方案2】：

.wizard ul
{
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center; /* instead of justify */
}

对于 .wizard ul li - 类，您应该提供边距/填充，并且可能提供相对宽度。

不确定这是否是最好的解决方案，但它应该可以工作:)

另外，也许你应该看看 CSS3 和 nth-element 伪类

【讨论】：