動態地居中和分散一個水平的ul

我想讓下面的代碼工作，以便列表項均勻分佈。動態地居中和分散一個水平的ul

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

任何想法爲什麼它不工作？

感謝

保羅

來源

2011-07-23 pbattisson

Quasunk的解決方案將居中元素，但它不會將它們隔開任何空間。因此，雙方結尾的元素不會被推到它們所包含的div的邊上。

在這種情況下可能需要使用Javascript。 JS會計算每個li的寬度，從包含元素的寬度中減去它，將結果除以li元素的數量 - 1（因爲這就是元素之間會有多少「間隙」），然後將該結果作爲除最後一個元素之外的所有元素的保證金。

這是一個非常簡單的計算，會很快發生。但我建議給容器div一個可見性：隱藏的屬性，然後顯示它，一旦上述計算和CSS完成。只要確保你不用display：none就可以啓動它，因爲那會阻止計算完全工作（一個顯示元素：none沒有寬度，也沒有子元素）。

來源

2011-07-23 14:45:48 maxedison

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

爲.wizard UL李 - 類，你應該提供保證金/填充，也許相對寬度。

不知道這是最好的解決辦法，但它應該工作:)

也，也許你應該看看CSS3和第n個元素僞類

來源

2011-07-23 14:29:43 Quasdunk

動態地居中和分散一個水平的ul

回答

相關問題