                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)

li为什么会居中显示？

ul是块级元素宽度和div一样 li左浮动后不是应该贴着ul左边框吗

慕移动1902815

2017-05-10

源自：初识HTML(5)+CSS(3) 15-7

关注问题我要回答

1399

操作

收起

2 回答

慕移动1902815 提问者
2017-05-10

学完最后一节课这才搞懂这里....原来很疑惑div是块级元素宽度默认是body的宽度，ul也是块级元素，宽度和div一样，li左浮动后应该贴着ul左边框，那么不是li要和body刚好一样宽才能居中吗？

最后一节告诉我们display:none除外的任何元素设置float:left之后会变为内联块状元素，而例子中li设置了float:left，ul设置了margin:0;padding:0;div也设置float:left，那么div,ul和的宽度都是li的内容宽度加上margin-right。

我试验了一下left:50%的这个50%应该是父元素宽度的50%，那么设置position:relative;left:50%;之后div的左边框移动向右到浏览器正中间，对ul设置position:relative;left:-50%;之后ul向左移动div宽度的一半。因为div和ul宽度一样，所以现在ul垂直方向上的面积平分线和div的左边框也就是浏览器垂直方向上的面积平分线重合了，li也就居中了。