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

文字显示不出

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

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



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

.warp

{  clear:both;

   float:left;

   position:relative;

   left:50%;

    

}

.wrap-center

{  background:#cc;

position:relative;

left:-50%;

   

    

}

</style>

</head>


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


<!--下面是代码任务区-->

<div class="wrap">

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

</div>

</body>

</html>


正在回答

2 回答

除了wrap写错了,还有一点,<div class="wrap-center">的css代码一定要加:margin=0,padding=0,即使不加看不出来没有居中也不行,因为.wrap-center的“left:50%"要想达到使得文字居中,那么必须使得子盒子和父盒子的边框重合,“margin=0,padding=0”的作用就是使得他们边框重合。不然,要是不重合的话,子盒子向左移动相当于父盒子50%距离的话,可就不能保证还能正好居中了,只有移动他自己(子盒子)的宽度的50%才能使得居中,但是“left:50%”这段代码移动的就是父盒子的啊,怎么办呢?唯一的方法就是子和父盒子的边框重合。而“margin=0,padding=0”正好就是这个功能

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

.warp

{  clear:both;

   float:left;

   position:relative;

   left:50%;   

}

名字写错了, 类选择器是warp,下面使用的时候是wrap。

自己写的时候最好还是在IDE里面写,可以检查错误

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

举报

0/150
提交
取消

文字显示不出

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信