UL標籤不以邊距爲中心：0自動; css樣式

Question

我正在嘗試創建將位於div中心的尋呼機。基本上，代碼如下所示：

<div class="cms-pager"> 
     <ul> 
      <li>1</li> 
      <li>2</li> 
      <li>3</li> 
     </ul> 
    </div> 

如果我指定這樣的CSS：

.cms-pager { } 
    .cms-pager ul { background-color: somecolor; margin: 0 auto; } 
    .cms-pager ul li { padding: 5px; margin: 3px; } 

然後UL慣於中心，因爲它具有跨越整個DIV寬度/背景色。我不會工作。

如果我指定CSS是這樣的：

.cms-pager { } 
    .cms-pager ul { width: 200px; background-color: somecolor; margin: 0 auto; } 
    .cms-pager ul li { padding: 5px; margin: 3px; } 

然後UL是在頁面上居中。問題是我必須指定固定寬度：200px;如果我只有1或2個鏈接，它正好在中心。所以這對我來說是不行的，我需要UL才能真正具有實際LI標籤的寬度，並且要按寬度精確指定。

如果我指定CSS是這樣的：

.cms-pager { margin: 0 auto; } 
    .cms-pager ul { float: left; background-color: somecolor; margin: 0 auto; } 
    .cms-pager ul li { padding: 5px; margin: 3px; } 

然後UL的背景下，只有李1是灰色的 - 3所以我知道的大小確定。但是因爲我必須使用float：left樣式，它會自動對齊到左側並忽略div邊距：0 auto style;

如果我指定這樣的CSS：

.cms-pager { margin: 0 auto; text-align: center } 
    .cms-pager ul {background-color: somecolor; margin: 0 auto; display: inline-block; } 
    .cms-pager ul li { padding: 5px; margin: 3px; } 

此版本適用於火狐，Chrome，但不是IE6/7它不與inline-block的正常工作;

有沒有解決這個問題的方法？是唯一的解決方案使用不同的標籤，如表tr tr或任何可以做到這一點？

Answer 1

這是否足夠接近？沒有浮動塊，沒有內嵌塊。只是普通的ol塊和對齊。

.cms-pager, .cms-pager ul { 
    margin: 0 auto; 
} 

.cms-pager { 
    text-align: center; 
} 

.cms-pager ul li { 
    display: inline; 
    width: 10px; 
    background-color: gray; 
    padding: 5px; 
} 

Here's a preview.