.wrap{position:relative;?left:50%;?}.wrap-center{? ? background:#ccc; position:relative; left:-50%;}結(jié)果是這樣的,跟最初一樣,沒(méi)動(dòng)<!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;}
/*下面是代碼任務(wù)區(qū)*/
.wrap{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>
<!--下面是代碼任務(wù)區(qū)-->
<div?class="wrap">
????<div?class="wrap-center">我們來(lái)學(xué)習(xí)一下這種方法。</div>
</div>
</body>
</html>只看任務(wù)區(qū)域的.
添加回答
舉報(bào)
0/150
提交
取消