Question

我正在尝试使用以下代码，以便列表项均匀分布。

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

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

由于

保

Answer 1

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

对于.wizard ul li - 类，你应该提供一个边距/填充，也许是相对宽度。

不确定这是否是最佳解决方案，但它应该有效：）

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

Answer 2

Quasunk的解决方案将使元素居中，但它不会将它们与任何空间分开。因此，双方两端的元素不会被推到其包含div的两侧。

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

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

动态地居中和分布水平ul

2 个答案: