为了账号安全,请及时绑定邮箱和手机立即绑定

解释与代码不符吧?

我们可以这样理解:假想ul层的父层(即下面例子中的div层)中间有条平分线将ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐;而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,从而实现li层的居中。

 

代码如下:

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代码:

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

这个解释和代码是不是对不上啊?看代码应该是

  1. div自己向右移动了50%

  2. 在div移动完的基础上(此时div最左侧与原div的中线位置对齐),ul相对于此时自己的位置向左移动50%

  3. li的样式设置为float:left,它自己没有移动,而是跟随者父元素ul一起移动的。

不应该是这么理解吗?


正在回答

代码语言

4 回答

https://img1.sycdn.imooc.com//5c0e2ee200016a7904630294.jpghttps://img1.sycdn.imooc.com//5c0e2efb0001610a12570298.jpghttps://img1.sycdn.imooc.com//5c0e2f1c0001f62403530303.jpghttps://img1.sycdn.imooc.com//5c0e2f3800015a7612710323.jpghttps://img1.sycdn.imooc.com//5c0e2f7100014cd503270301.jpghttps://img1.sycdn.imooc.com//5c0e2f8e0001674712730352.jpghttps://img1.sycdn.imooc.com//5c0e2fbc0001ae1503540320.jpghttps://img1.sycdn.imooc.com//5c0e2fce0001f33111850348.jpghttps://img1.sycdn.imooc.com//5c0e300000012f9905140172.jpg

注意异动前的位置,你就明白了

1 回复 有任何疑惑可以回复我~

你可以这样理解:

  1. div向右移动了50%,左边线在浏览器中央

  2. ul相对于div的左边线,即中央向左移动了50%,ul的中央就是div的左边线,也就是中央

  3. li的float:left是相对于ul的,所有li加起来就是ul,所以li就决定了ul的大小,因此,不管li怎么变都会在中央,你可以尝试着改li的数量和内容,结果也还是居中的。

0 回复 有任何疑惑可以回复我~
#1

慕神0307189

第二点和第三点 不理解,可以麻烦在详细的解释一下么? 自己画图画了很久没搞懂,
2018-11-16 回复 有任何疑惑可以回复我~

是的,我跟你一样,也是这样理解的,但是,代码中对 div 和 ul 都没定宽,根据块状元素在不定宽的情况下其显示宽度是其父辈元素的100%,按这样理解,div 和 ul 的宽度应该是充满浏览器的宽度(因为div的父层是body),而 li 层虽然已经转化成行内元素,但是CSS代码是  float:left,这样的话应该也不会居中,但结果却是居中的,所以很疑惑。。

当然,上面说的是 div 没有定宽的情况,如果给 div 定了宽的话,按照这小节给出的方法代码,能达到居中效果是可以理解的,不过这样的话就不符合这节课的中心了,因为这节是讲

水平居中总结-不定宽块状元素方法

,离题了。。。。。

0 回复 有任何疑惑可以回复我~

bzd不知道

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

解释与代码不符吧?

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号