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

Posted 2023-03-06

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

【英文标题】：UL tag not centering with margin: 0 auto; css style

【发布时间】：2011-06-17 07:02:29

【问题描述】：

我正在尝试创建位于 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）的唯一解决方案，还是可以用这个做任何事情？

【参考方案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.

【讨论】：

LI 在彼此之下。它居中但不是并排

@fnovak：你的最后一个 sn-p 是我试图建立我的代码的基础，也许我读错了。我想我知道你现在想要实现什么；给我几分钟再试一次。

我已将此添加到 LI: display: inline;边距：2px;