2014-04-01 150 views
1

我有一些列表項目的集合,我希望在包裝時將其左對齊,但集中在類似iOS圖標在主屏幕上顯示的列表中。居中左對齊列表項目

我的問題是,在某些屏幕尺寸下,元素將自動換行到新行,但不需要的填充將保留在右側。

enter image description here

我知道我可以居中父容器內的列表中,但仍然不會中心自本身是創建微胖列表中的列表項。

我的造型如下:

li { 
    width: 100px; 
    height:100px; 
    background-color: blue; 
    float: left; 
    margin: 5px; 
} 
ul { 
    list-style: none; 
    text-indent: none; 
    padding-left: 0; 
    background-color: green; 
    display: inline-block; 
    margin: 0 auto; 
    padding: 0; 
} 

這撥弄演示了此問題:http://jsfiddle.net/Ea8Kd/1/

如何刪除不需要的填充物,或中心的項目列表中,同時確保第二行是左是否合理?

+0

我不認爲這可以完成你描述的方式,而不使用JS。 – badAdviceGuy

+0

@badAdviceGuy我認爲你可能是對的。大多數情況下,我都在發佈這個問題,希望我錯了。 –

+0

如果將'ul'包裝在容器中並將綠色的bg放在該容器上,則可以將'ul'居中。這是一個選擇嗎? –

回答

1

不知道這是你想要什麼,但我加

ul { 
    max-width: 550px; 
    } 

移除填充在右側。

如果這不是它可以顯示你想要的圖片嗎?你的問題不是100%清楚。

+0

最初,我希望有一個解決方案可以讓列表調整到屏幕大小,以便每行可以有不同數量的圖標。但是,設置最大寬度可以有效地限制每行可顯示的項目數量,這似乎是實現此功能的唯一方法。 –