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

不定宽块状元素水平居中问题

http://img1.sycdn.imooc.com//59003e290001e09c09370552.jpg

http://img1.sycdn.imooc.com//59003e2a0001e6a609240590.jpg

如上代码,同样的方法,第一个div居中了,第二个div没有居中,为何加上br换行后第二个才能正常居中

正在回答

3 回答

为什么我换行了还是不行?

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>继承</title>

<style type="text/css">


.container{

    float:left;

    position:relative;

    left:50%;

    border: 1px solid red;}   

.container ul{

    list-style:none;

    margin:0;

    padding:0;

    

    position:relative;

    left:-50%;}

.container li{float:left;display:inline;margin-right:15px;}


.clearfix:after{content:'.';display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}



.wrap{float:left;

    position:relative;

      left:50%;border: 1px solid blue;}

.wrap-center{

    background:#ccc;

    position:relative;

    left:-50%;

    

}



</style>

</head>

<body>


<div class="container clearfix">

    <ul>

        <li><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

    </ul>

</div>

<br/>

<div class="wrap">

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

</div>

</body>

</html>


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

第一个.container的样式应该也发一下。ul也有浮动,会对.wrap宽度产生影响。换行之前他们都在同一行,换行后没了所以就好了。

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

这里可能是因为第二个紧邻的div受到第一个浮动的影响,br换行将他们隔开了

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

举报

0/150
提交
取消

不定宽块状元素水平居中问题

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