【发布时间】：2013-08-19 04:22:17
【问题描述】：
我在周末的大部分时间都在尝试解决这个问题，但我似乎无法做到这一点，我网站的基础知识已经完成，但有两件事：
ul.nav 适合所有按钮，但是，10-15 像素区域突出到左侧。离开 ul.nav。 （我使用的是 MS 表达式 web 4，它用对角红线标记。它会阻止菜单正确对齐，更糟糕的是，它会导致一个菜单按钮在以 1024*768 浏览网站时下降到其他菜单按钮下方。:-(
容器 div 的背景图片（代码中称为“Div”）不会垂直拉伸，而是会重复自身。它会以这种方式产生烦人的线条。有没有办法让它伸展？
非常感谢您的建议。代码如下。
HTML：
<body>
<div id="container">
<div id="masthead" class="masthead"
onclick="window.location.href='Index.html'"; style="cursor:pointer"></div>
<div id="top-nav" >
<ul class="nav">
<li><a href="#"> Europe </a></li>
<li><a href="ContentNA.html"> N. America </a></li>
<li><a href="#"> S. America </a></li>
<li><a href="#"> Asia </a></li>
<li><a href="#"> Africa </a></li>
<li><a href="#"> Australia </a></li>
<li><a href="#"> Misc </a></li></ul>
</div>
<br />
<br />
<div id="message">
<br clear="all" />
</div>
</body>
</html>
CSS
body {
background-size: 100% 100%;
background-position: center center;
font-family: sans-serif;
font-size: medium;
font-weight: normal;
font-style: normal;
font-variant: normal;
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
body: ;
background-image: url('BG_MP.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
div {
border-radius: 15px;
border-width: 5px;
border-style: none;
width: 70%;
margin: 50px auto 10px auto;
padding: 10px;
background-image: url('parchment.jpg');
background-size: 100%;
left: auto;
right: auto;
}
#masthead {
border-radius: 15px;
background: transparent;
height: 220px;
width: 650px;
background-image: url('masthead.jpg');
background-repeat: no-repeat;
}
#top-nav {
height: 71px;
background : transparent;
list-style : none;
margin-top : 7px;
margin-bottom : 11px;
background-repeat: no-repeat;
text-align: center;
}
ul.nav {
border-radius: 15px;
background : transparent;
height : 57px;
line-height : 31px;
list-style : none;
font-size : 14px;
font-weight: bolder;
display: inline-block
}
ul.nav li {
display : inline;
padding : 0;
background : transparent;
}
ul.nav a {
font: 100%;
background: transparent;
height : 30px;
font-size : 12px;
color: #000000;
float : left;
padding: 11px 8px 11px 8px;
text-decoration : none;
border-top: 1px solid #252525;
border-bottom : 4px solid #252525;
border-left : 1px solid transparent;
border-right : 1px solid transparent;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
ul.nav a:hover {
background : #252525;
border-top : 1px solid #252525;
border-bottom : 4px solid #000;
border-left : 1px solid #252525;
border-right : 1px solid #252525;
color : #FFF;
padding : 11px 8px 11px 8px;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
#message {
background: transparent;
left: auto;
right: auto;
text-align: center
}
【问题讨论】：
标签： image menu background alignment stretch