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 style它会自动对齐到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，因为它无法正常使用内联块;

这个问题有解决办法吗？唯一的解决方案是使用不同的标签，例如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;
}

Here's a preview.

UL标签不以保证金为中心：0自动; css风格

1 个答案: