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 自动;样式的主要内容,如果未能解决你的问题,请参考以下文章