固定导航栏 css

Question

我遇到滚动条没有推到最右边的问题。 我将导航 class 的边距设置为 0 并溢出：自动。 以下是codepen链接

Answer 1

如果您想要隐藏滚动条，请使用：

ul {
 scrollbar-width: none;
}

或尝试使用 ::-webkit-scrollbar

Answer 2

父 div (.nav) 的宽度与列表的宽度不同。

尝试将.nav ul的宽度设置为 300px。

.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 300px;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

我希望这是你想要实现的。 如果没有，请分享更多详细信息。

Answer 3

调整侧边栏的 css 以满足您的需要..

 * { box-sizing: border-box; } body { margin: 0; font-family: 'Poppins', sans-serif; }.container { margin-top: -20px; display: flex; flex-direction: row; } @media (max-width: 600px) {.container { margin-top: -20px; display: flex; flex-direction: column; } } div.nav { list-style-type: none; margin: 0; padding: 0; width: auto; background-color: #f1f1f1; position: fixed; height: 100%; white-space: nowrap; }.content { }.nav h1 { text-align: center; }.nav ul { list-style-type: none; margin: 0; padding: 0; width: auto; background-color: #f1f1f1; /* position: fixed; */ height: 100%; overflow-y: scroll; /* OPTIONAL: add below 2 lines of code to Hide scroll bars in IE, Edge, mozilla*/ -ms-overflow-style: none; scrollbar-width: none; } /* OPTIONAL: add below 3 lines of code to Hide scroll bars in google chrome and apple safari*/.nav ul::-webkit-scrollbar { display: none; } a { padding: 8px 16px; display: block; text-decoration: none; color: black; }.content { margin-left: 30%; margin-right: 10%; } li { list-style-type: disc; }.code { padding: 0; width: 100%; background: powderblue; padding: 5px 15px 15px; margin-left: 10px; line-height: 1em; }

 <body> <div class="container"> <div class="nav"> <h1>JS Documentation</h1> <hr> <ul> <a href="#introduction">Introduction</a> <hr> <a href="#know">What you should already know</a> <hr> <a href="#javascript">JavaScript and JavaScript</a> <hr> <a href="#hello">Hello world</a> <hr> <a href="#vari">Variables</a> <hr> <a href="#declare">Declaring variables</a> <hr> <a href="#scope">Variable scope</a> <hr> <a href="#global">Global variables</a> <hr> <a href="#constant">Constant</a> <hr> <a href="#type">Data types</a> <hr> <a href="#if">if...else statement</a> <hr> <a href="#while">while statement</a> <hr> <a href="#function">Function declarations</a> <hr> <a href="#reference">Reference</a> <hr> </ul> </div> </body>

固定导航栏 css

问题描述

3 个解决方案

解决方案1
0 2022-02-27 08:19:39

解决方案2
0 2022-02-27 09:18:09

解决方案3
0 2022-02-27 18:56:04

固定导航栏 css

问题描述

3 个解决方案

解决方案1 0 2022-02-27 08:19:39

解决方案2 0 2022-02-27 09:18:09

解决方案3 0 2022-02-27 18:56:04

解决方案1
0 2022-02-27 08:19:39

解决方案2
0 2022-02-27 09:18:09

解决方案3
0 2022-02-27 18:56:04