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

为什么后面一个div块没有独占一行显示,而是显示在前面的标签后面

<!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-center{

    background:#ccc;

    float:left;

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

因为,后面的DIV已经被你设置成了FLOAT(浮动模式),所以,它自然与前面的而不是它的前辈元素并列了

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

我的想法是,首先,按照要求写完后,后一个`<div class="wrap-center">我们来学习一下这种方法。</div>`由于其他元素设置了relative,且margin距离顶部0px, 后一个div会遮盖住同一行的其他标签下内容而不会另起一行,你把margin值删了,其他标签就会跑到第二行,其次你没有给父元素`<div class="wrap">`设置css样式,无法对其相对定位,所以会显示在后面

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

举报

0/150
提交
取消

为什么后面一个div块没有独占一行显示,而是显示在前面的标签后面

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