UL标签不使用margin: 0 auto; CSS样式居中。

Question

UL标签不使用margin: 0 auto; CSS样式居中。

5

我将尝试创建一个分页器，它将位于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; }

如果整个div都有宽度/背景颜色，那么ul就无法居中，这样做是行不通的。

如果我像这样指定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 样式。

如果我像这样指定 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，还是可以通过其他方式解决？

- feronovak

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

这个是否足够接近？没有浮动，也没有行内块。只有普通的块和对齐。

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

这里有一个预览。