由 dawei 当你在缩小浏览器页面的时候他的内容区并没有缩小，是留白的变小。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper{
height: 30px;
background-color: gray;
}
.content{
width: 1200px;
height: 30px;
background-color: #0f0;
margin: 0 auto;/* 上下0,左右自适应 */
}
</style>
</head>
<body>
<div class="wrapper"><!-- 背景区 -->
<div class="content"></div><!-- 内容区 -->
</div>
</body>
</html>
这样当你在缩放的时候，缩放的是外面灰色的部分，绿色的部分始终居中。
里面的文字就是这样来写了
<div>
<ul style="float: left;"></ul>
<ul style="float: right;"></ul>
</div>