<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（即container）设置为浮动，然后就能移动了。但是li为什么要浮动?后面还设置成了行内，而且li应该是装在ul里面的，所以应该直接就在中间啊？为什么右边界还要8个像素？另外这里用绝对定位行不行？为什么要用相对定位？谢谢~
2017-08-25
1、li为什么要浮动?后面还设置成了行内?li应该是装在ul里面的，所以应该直接就在中间啊？
li是块级元素，独占一行，使用float可以使li排列成一行。display:inline和float:left连用，是为了解决老版本IE兼容性问题。
2、为什么右边界还要8个像素？使每个li之间产生间距，美观、方便点击效果，你可以改成0px试一试，就会紧紧挨在一起。
3、另外这里用绝对定位行不行？为什么要用相对定位？
不行。这个问题不好解释，首先你要明白这个方法实现居中的原理，以及relative left:-50%（注意是-50%）的意思，否则无法明白怎么回事。
1》div.container设置了居中，实际并不是div居中，而是这个div的左边界在body在正中间。
2》ul在div.container中，li排成一行，padding和margin都为0，也就是说ul的左边界和div.container的左边界是挨着的（在body正中间），relative left:-50%的意思：ul相对于自身的宽度向左偏移50%，自身的宽度是多少呢？假设是40px，那么向左偏移50%也就是偏移了20px，结合1》的解释，恰好达到居中效果。
举报
