overflow: auto
导致菜单下的滚动条。如果您不希望这样,请将其删除并在菜单上(或者,在实际情况下,在页面内容上)设置最小宽度,以使滚动条出现在浏览器窗口的底部。
PS——将 div 包裹在a
s 中并不是一个好主意。它在 HTML5 中是允许的,但我会说只有在你真的需要时才这样做(这里不需要)。
编辑:好的,按照评论中的要求,这是一个粗略的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
body {
padding: 0; margin: 0;
}
.wrapper {
width: 900px;
margin: 0 auto;
}
#menu{
width: 100%;
min-width: 900px;
height: 40px;
padding: 0 0 12px;
margin: 0 auto;
background: #f8f8f8 url() repeat 0 0;
border-style: solid;
border-color: #000;
border-width: 0 0 1px;
box-shadow: 0px 1px 10px #000;
text-align: center;
position: absolute;
top:0;
left:0;
right:0;
}
li {
display: inline-block;
}
li a {
font-family:Helvetica neue,Helvetica,Arial,Verdana,Sans-serif;
font-size:16px;
display:inline-block;
border:solid;
border-color:#aaa #ccc;
border-width:0 0 5px 6px;
padding:6px 35px 7px 35px;
margin:7px 15px;
box-shadow:-1px 2px 5px #404040;
}
</style>
</head>
<body>
<div class="wrapper">
<ul id="menu">
<li><a href="">text here 1</a></li>
<li><a href="">text here 2</a></li>
<li><a href="">text here 3</a></li>
<li><a href="">text here 4</a></li>
</ul>
<br><br><br><br><br><br>
Some content
</div>
</body>
</html>