UL 标签未以边距居中：0 自动；样式

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 背景只有在 LI 1 - 3 下是灰色的。所以我知道大小还可以。但是因为我必须使用 float: left 样式，所以它会自动向左对齐并忽略 div margin: 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; }

此版本适用于 Firefox、Chrome，但不适用于 IE6/7，因为它不能与 inline-block 一起正常工作；

这个问题有什么解决办法吗？是使用不同标签（如 table tr td）的唯一解决方案，还是可以用这个做任何事情？

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.