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背景仅在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

这足够接近了吗？没有浮动，没有内联块。只是简单的块和对齐。

.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;
}

这是预览。