<style>
.container{ float:left;
position:relative;
left:50%}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;}
.container li{float:left;display:inline;margin-right:8px;}
</style>
……………………………………
这段代码是为了让不定宽块状元素可以水平居中的。
先是div飘左，然后又在中线右侧；ul往左移动div的一半宽度，也就是说ul现在是居中了。
但是不明白为什么li也会跟着居中呢？
而且li里面的设定又是为了什么？
2017-03-03
看代码先。
.container{ float:left;
position:relative;
left:50%}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;}
.container li{float:left;display:inline;margin-right:8px;}
先设置div向右浮动50%，这个50是指浏览器窗口的一般，原来div是在左上角的，现在来到浏览器窗口一半的位置。现在我们再来看ul的属性设置，外边距margin和内填充padding都为0，也就是说ul这个容器的是和div等宽的，而且因为内填充也是0，因此li也和ul等宽！还有一个重要的点，就是li被设置成了行内元素，所以123会在一行显示，而且整个容器的宽度就是123所占的宽度，也就是说div的宽度也是一样宽，然后这里继续看ul的属性设置，left：-50%，这里的相对定位是相对div的左边框来说的，这个时候ul带着li里面的123向左移动-50%，因为ul和div的宽度一样，所以这就实现了123居中的效果！
举报
