日期:2014-05-16  浏览次数:20885 次

div居中,但如果有竖着的滚动条,div会往左偏,怎么解决?
本帖最后由 zlbpolly 于 2013-08-07 13:54:46 编辑
div居中,如果网页内容比较长,出现竖滚动条时,居中的div会受滚动条影响,往左边偏 ?怎么解决呢?

原本是这样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    
<style>
html,body,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,blockquote,pre,form,input,textarea,fieldset,table,th,td{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.6 Tahoma,Verdana,Arial,"\5b8b\4f53"}
body{background:#fff;color:#7d7d7d;min-width:960px}
ul,ol{list-style:none}
img{border:0;vertical-align:top}:focus{outline:0}


.doc-hd,.doc-bd{width:960px;margin:0 auto}.doc-bd{padding-bottom:20px}
.logo{background:url(http://p2.qhimg.com/t011554d7f1d248cbd5.png) no-repeat}
.main{width:623px;float:left}.side{width:318px;float:right;border:1px solid #f0f0f0;border-top:0}.bd{padding:10px 15px}

.doc-hd{height:52px;position:relative;z-index:999}
.logo{width:222px;height:46px;float:left;margin-top:4px;margin-left:-7px}.info{float:left;margin-top:8px}.info a{color:#7d7d7d;font-size:12px}.info a:hover{color:#20a135}.info img{padding-top:4px
}
.nav{float:right;font:16px/25px "\5fae\8f6f\96c5\9ed1";position:absolute;right:0;top:16px}
.nav li{float:left;margin-left:38px}.nav a{height:34px;color:#555;float:left;cursor:pointer;position:relative}
.nav a:hover,.nav .cur{color:#20a135}
.nav .hot,.nav .new{background-position:-24px -144px;width:23px;height:14px;display:block;position:absolute;right:-24px;top:-2px;*top:-3px}
.nav .new{background-position:0 -144px}

</style>
</head>
<body>


<div class="doc-hd">
<a target="_self" title="logo" class="logo" href=""></a>
<ul class="nav">
<li><a target="_self" class="cur" href="#">首页</a></li>
<li><a>产品列表</a></li>
<li><a>公司介绍</a></li>
<li><a href="#">产品展示</a></li>
<li><a>个人服务</a></li>
<li><a>企业服务</a></li>
<li><a href="#">游戏</a></li>
<li><a href="#">论坛</a></li>
</ul>
</div>


</body>
</html>

如果加一个div出现滚动条,居中的导航条就往左偏了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">