代码如下:
<!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>
如果不出现横向滚动条都是正常的,出现横向滚动条时最右边就没有背景色了,如图:
请大家帮我看看是什么原因?
把.container中的width: 1000px;改成width:100%;
.container {
padding: 50px 0;
text-shadow: 0 -1px 0 #484D55;
overflow: hidden;
width: 100%;
margin: 0 auto;
}
@菜鸟程序猿: 你觉得那个div只设1000px的话,那你改一下这个(把position注释掉),让字和背景一块能拖动,不过理论上也要把body也设置个宽度,要不右边还是会有没有背景的区域的。
#local-nav .container {
//position: relative;
z-index: 2;
}