当前位置：文江博客话题详情

CSS HTML Fixed navbar

修复导航栏CSS

发布于 2025-01-10 19:18:32 字数 143 浏览 0 评论 0原文

固定导航栏

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

最美的太阳 2025-01-17 19:18:32

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

ul {
 scrollbar-width: none;
}

或尝试使用 ::-webkit-scrollbar

if your tying to hide the scrollbar use:

ul {
 scrollbar-width: none;
}

or try it with ::-webkit-scrollbar

回复收藏 0 原文

煮酒 2025-01-17 19:18:32

父级 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;
}

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

There is a difference between width of the parent div (.nav) and the list.

Try to set the width of .nav ul to 300px.

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

I hope this is what you wanted to achieve. If not, please share more details.

回复收藏 0 原文

蓝天 2025-01-17 19:18:32

调整侧边栏的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>

Tweaked the css of sidebar to match your need..

* {
    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>

回复收藏 0 原文

~没有更多了~

关于作者

暂无简介

文章

评论

25 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

微信用户

文章 0 评论 0

小情绪

文章 0 评论 0

追我者格杀勿论

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

笨死的猪

文章 0 评论 0

彭明超

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文