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

相对定位出错的问题

以下代码无法实现wrap-center盒子的居中,如果把浮动和定位的left改成right就可以了,这是什么原因呢?

我尝试了设置wrap{float:left;position:left; left:0;}结果左边与浏览器有间隙,把这里的所有left改成right就不会有间隙,不理解。。



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



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

.wrap{

      float:left;

      position:relative;

      left:50%;

}

.wrap-center{

    background:#ccc;

    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>


正在回答

3 回答

你肯定是故意的。。。。。。。。。。

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

我只想说 你的文字吧123给盖着了 不信你把<div class="wrap">这行加下面两行删了 就可以看到123了。。

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

buzhidao 

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

举报

0/150
提交
取消
初识HTML(5)+CSS(3)-升级版
  • 参与学习       1227288    人
  • 解答问题       18247    个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

进入课程

相对定位出错的问题

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

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

帮助反馈 APP下载

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

公众号

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