首页 新闻 搜索 专区 学院

请高手帮忙看一段CSS,为什么出现横向滚动条时背景色没了?

0
悬赏园豆:5 [已解决问题] 解决于 2012-03-22 09:55

代码如下:

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
margin
: 0;
padding
: 0;
border
: 0;
outline
: 0;
font-weight
: inherit;
font-style
: inherit;
font-size
: 100%;
font-family
: inherit;
line-height
: inherit;
}
body
{
-webkit-font-smoothing
: antialiased;
-moz-font-smoothing
: antialiased;
background
: #717883;
font
: 14px/1 "Helvetica Neue", Arial, sans-serif;
color
: #1E3950;
}
#local-nav
{
background
: #4E7BA3;
border-top
: 1px solid #6C9CC7;
border-bottom
: 1px solid #427EB4;
height
: 69px;
}
.container
{
padding
: 50px 0;
text-shadow
: 0 -1px 0 #484D55;
overflow
: hidden;
width
: 1000px;
margin
: 0 auto;
}
#local-nav .container
{
position
: relative;
z-index
: 2;
}
#local-nav ul
{
position
: absolute;
top
: 15px;
right
: 0;
}
#local-nav ul li
{
float
: left;
margin
: 0 0 0 10px;
}
#local-nav ul li a:hover
{
color
: White;
}
#local-nav ul li a
{
display
: block;
font-size
: 14px;
color
: #D9E6F8;
padding
: 8px 14px;
font-weight
: 500;
text-shadow
: 0 -1px 0 #032B4D;
line-height
: 1.1;
}
</style>
</head>
<body>
<div id="header">
<div id="local-nav">
<div class="container">
<ul>
<li><a title="Home" href="#">Default</a></li>
<li><a title="Contact" href="#">Contact</a></li>
<li><a title="About" href="#">About</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

如果不出现横向滚动条都是正常的,出现横向滚动条时最右边就没有背景色了,如图:

请大家帮我看看是什么原因?

草根程序猿的主页 草根程序猿 | 初学一级 | 园豆:129
提问于:2012-03-20 14:04
< >
分享
最佳答案
0

把.container中的width: 1000px;改成width:100%;

.container {
padding
: 50px 0;
text-shadow
: 0 -1px 0 #484D55;
overflow
: hidden;
width
: 100%;
margin
: 0 auto;
}
收获园豆:5
LCM | 大侠五级 |园豆:6876 | 2012-03-20 14:48
谢谢,这是一种解决方案
如果宽度想要固定,有没有办法解决这个问题呢
有的网站出现滚动条后是有背景色的啊
草根程序猿 | 园豆:129 (初学一级) | 2012-03-20 15:00

@菜鸟程序猿: 你觉得那个div只设1000px的话,那你改一下这个(把position注释掉),让字和背景一块能拖动,不过理论上也要把body也设置个宽度,要不右边还是会有没有背景的区域的。

 #local-nav .container {
//position
: relative;
z-index
: 2;
}
LCM | 园豆:6876 (大侠五级) | 2012-03-20 15:12
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册