不定宽块状元素水平居中问题
如上代码,同样的方法,第一个div居中了,第二个div没有居中,为何加上br换行后第二个才能正常居中
如上代码,同样的方法,第一个div居中了,第二个div没有居中,为何加上br换行后第二个才能正常居中
2017-04-26
为什么我换行了还是不行?
<!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>
举报