1

I have a menu with some uls and content under it and I want that when I get the browser window bigger(CTRL +) the scrollbar that appears appears on the bottom of the page not under the menu. I have the codes here (http://fiddle.jshell.net/MB3cF/) and as you can see in css I wrote 

white-space:nowrap;
overflow:auto;

but the problem as you see in the website that the scrollbar appears under the menu exactly.

4

1 回答 1

1

overflow: auto导致菜单下的滚动条。如果您不希望这样，请将其删除并在菜单上（或者，在实际情况下，在页面内容上）设置最小宽度，以使滚动条出现在浏览器窗口的底部。

PS——将 div 包裹在as 中并不是一个好主意。它在 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>
于 2013-05-17T00:29:23.937 回答