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

用了float:left又用position:relative。为什么？

第15-5课中，div的float:left起了什么作用？li的float:left又起了什么作用？为什么不直接使用display:inline-block？

<!DOCTYPE HTML>

<html>

<head>

<title>不定宽块状元素水平居中</title>

<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;}

/*下面是代码任务区*/

.wrap-center{

background:#ccc;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

<div class="wrap-center">我们来学习一下这种方法。</div>

</div>

</body>

</html>

安之以祖古

2016-05-29

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

关注问题我要回答

1516

操作

收起

1 回答

小小小小哒回答被采纳 +3 积分
2016-05-30

我来说下我的观点（尽量通俗易懂）：
首先，咱们只看container与ul，先不管其他。

1.container浮动到left；

2.相对定位，是相对于container原来的位置进行移动，参照物为页面，右移50%，也就是说，现在container的左边界就在页面正中间。

3.ul是container中的一个子元素，规定了padding为0和margin为0，也就是说，ul包含在container中，但是它们的边界是重合的（因为边界距离为0），也就是说，从盒子的角度来看，ul这个盒子和container这个盒子是一样的，简单来说，ul这个盒子就是container那个盒子。

4.现在，ul这个盒子要向左边移动50%，此时的参照物为container，也就是说ul这个盒子向左移动container的50%，然而ul本来就是container，也就相当于container自己向左移动了它自己的50%。

5.此时，container的中间与页面的中间重合，即container水平居中，由于ul与container本来就是一样的，ul也就水平居中了。

然而ul始终是一个列表，即使水平居中了，1 2 3 也是垂直排列的（当然它们整体是水平居中的），另外加入一些css让它们成水平排列，依然不影响ul这个整体的水平居中。

欢迎拍砖！