UL 标签未以边距居中:0 自动;样式

Posted

技术标签:

【中文标题】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;

以上是关于UL 标签未以边距居中:0 自动;样式的主要内容,如果未能解决你的问题,请参考以下文章

在 jquery 小部件中以边距自动居中

怎样使div块居中对齐?

CSS里 ul标签怎么居中啊

为啥边距 0 自动不居中,即使有规定的宽度?

怎么设置ul ,li标签元素横排且居中啊?

怎么设置ul ,li标签元素横排且居中啊?