不定宽块状元素方法（三）
为什么我把： .container ul{}中的left:-50% 和position：relative去掉，显示的结果不变呢
fighting1994
2016-11-05
5 回答
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{
border:1px solid red;
float:left;
position:relative;
left:50%
}
.container ul{
border:1px dotted black;
list-style:none;
margin:0;
padding:0;
}
.container li{border:1px dotted yellow;}
</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>
</body>
</html>给div、ul和li都增加了框。并且把container ul{}中的left:-50% 和position：relative去掉
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{
border:1px solid red;
float:left;
position:relative;
left:50%
}
.container ul{
border:1px dotted black;
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%
}
.container li{border:1px dotted yellow;}
</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>
</body>
</html>把container ul{}中的left:-50% 和position：relative加上。效果就比较明显了
举报
0/150
提交
取消
