Question

我有一个带有一些uls和内容的菜单，我希望当我将浏览器窗口设置得更大（CTRL +）时，出现的滚动条会显示在页面底部而不是菜单下方。我在这里有代码（http://fiddle.jshell.net/MB3cF/），你可以在css中看到我写的

white-space:nowrap;
overflow:auto;

但是你在网站上看到的问题是滚动条完全出现在菜单下面。

Answer 1

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

PS-在a s中包装div并不是一个好主意。它在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>

滚动条显示在页面底部

1 个答案: