当我使用我的导航栏时，是否可以让它不被推出屏幕？
我试过将它们包装在单独的 div 中， overflow hidden 等。
理想情况下，它将位于带有 overflow:hidden 的静态页面上；但这只是我所拥有的一个快速模型。
注意这是一个 2 层导航，所以这个导航已经在另一个部分中了。
我有一个 JS fiddle here
HTML;
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a {
display: block;
width: 60px;
background-color: #dddddd;
}
section{
height:100vh;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<section id="home">
<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p>
</section>
<section id="news">
<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>
</section>
<section id="contact">
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>
<section>
</body>
</html>
最佳答案
您可以使用 position:fixed 并且您的导航栏始终位于顶部。
链接:https://jsfiddle.net/bz68252t/2/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position:fixed
}
section:first-of-type{
padding-top:2em;
}
关于html - 部分将导航栏移出屏幕，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31969648/