gpt4 book ai didi

css - 页面底部出现滚动条

转载 作者:行者123 更新时间:2023-11-28 18:22:05 25 4
gpt4 key购买 nike

我有一个菜单,下面有一些 uls 和内容,我希望当浏览器窗口变大(CTRL +)时,出现的滚动条出现在页面底部而不是菜单下方。我这里有代码 ( http://fiddle.jshell.net/MB3cF/ ) 正如你在我写的 css 中看到的那样

white-space:nowrap;
overflow:auto;

但是您在网站上看到的问题是滚动条恰好出现在菜单下方。

最佳答案

overflow: auto 导致菜单下方出现滚动条。如果您不想要它,则将其删除并在菜单上(或者在实际情况下,在页面内容上)设置最小宽度,以使滚动条出现在浏览器窗口的底部。

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

关于css - 页面底部出现滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16598606/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com