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.