html - 关于“CSS居中无序列表”的意见

Question

在这个问题中，我不会问“如何”将无序列表水平居中，因为互联网上已经有大约一万一万种资源。

相反，我想问它的“为什么”部分。

更准确地说，我们为什么要这样做

ul {
   position:relative;
   left:50%;
}
ul > li {
   position:relative;
   right: 50%;
}

而不是这个：

ul {
   position:relative;
   left:25%;
}

当两者似乎都可以解决问题时。有什么想法吗？

Answer 1

原因是，因为第一种方法ul在每种情况下都以它为中心 - 独立于它有多少个孩子li。

第二种解决方案将ul25% 放在右侧，这将在非常特殊的情况下起作用，此时 的li宽度恰好占据总宽度的 50%，但在任何其他情况下都会中断。

left在父级和子级上使用right是一种非常常见的做法，可以让子级以动态尺寸（宽度）居中，在处理动态内容时就是这种情况。

在某些情况下，text-align:center;它也可以工作，但是当您必须使用绝对定位时会失败。

在此处查看示例小提琴。

Answer 2

我没有使用任何这些解决方案。检查这个http://jsfiddle.net/yz7jF/。

像这样写：

ul {
   display:inline-block;
   *display:inline;/*For IE7*/
   *zoom:1;/*For IE7*/
}
li{
    float:left;
    text-align:left;
}
.anyParent{
    text-align:center;
}