无法摆脱黑条
[英]Cannot get rid of the black bar
问题描述
There is a black bar on top of the site I couldn't understand where it came from. 
网站顶部有一个黑色的栏，我不知道它来自哪里。 It doesn't appear if I use float: left to put the navigation bar on the left side instead of display: inline-block to center it. 如果我使用float：left，则不会出现，将导航栏放在左侧而不是display：inline-block将其居中。 I wanted to make the navigation bar transparent on top of the background rather than the black bar. 我想使导航栏在背景顶部透明，而不是黑栏。
Also there is a small space between the 'Home' and other menus that I don't know where it came from too. 在“主页”和其他菜单之间也有一个很小的空间，我也不知道它来自哪里。 I'm still new to html and css, please help me. 我对html和CSS还是陌生的，请帮助我。 Thanks in advance! 提前致谢！
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; src: url('space-mono-v4-latin-regular.eot'); src: local('Space Mono'), local('SpaceMono-Regular'), url('space-mono-v4-latin-regular.eot?#iefix') format('embedded-opentype'), url('space-mono-v4-latin-regular.woff2') format('woff2'), url('space-mono-v4-latin-regular.woff') format('woff'), url('space-mono-v4-latin-regular.ttf') format('truetype'), url('fonts/space-mono-v4-latin-regular.svg#SpaceMono') format('svg'); } body { margin: 0; padding: 0; font-family: 'Space Mono', monospace; background: #000; } header { padding: 10px 100px; box-sizing: border-box; } section { width: 100%; height: 100vh; } section.sec1 { background: orange; background-size: cover; background-position: top; background-attachment: fixed; } section.sec2 { padding: 100px; box-sizing: border-box; height: auto; } section.sec2 h2 { font-size: 3em; margin: 0; padding: 0 0 20px; color: #fff; } section.sec2 p { font-size: 1.2em; margin: 0; padding: 0; color: #fff; } section.sec3 { background: url(bg2.jpg); background-size: cover; } .first-level { list-style: none; text-align: center; padding: 0px; margin: 0px; position: sticky; top: 10px; } .first-level a { text-decoration: none; line-height: 40px; color: #fff; } .first-level li { position: relative; text-align: center; display: inline-block; height: 40px; width: 160px; background: rgba(0,0,0,0.4); } .first-level > li:hover { background-color: teal; } .second-level { display: none; } .third-level { display: none; }
<!DOCTYPE html> <html> <head> <title>NavigationBar</title> <link rel="stylesheet" href="newnavbar.css" type="text/css"> </head> <body> <ul class ="first-level"> <li><a href="#">HOME</a></li> <li><a href="#">LAB 1-5</a> <ul class ="second-level"> <li><a href ="#">LAB 1</a></li> <li><a href ="#">LAB 2</a></li> <li><a href ="#">LAB 4</a></li> <li><a href ="#">LAB 5</a></li> </ul> <li><a href="#">LAB 6-8</a> <ul class ="second-level"> <li><a href ="#">LAB 6</a></li> <li><a href ="#">LAB 7</a></li> <li><a href ="#">LAB 8</a></li> </ul> <li><a href="#">LAB 9-11</a> <ul class ="second-level"> <li><a href ="#">LAB 9</a></li> <li><a href ="#">LAB 10</a></li> <li><a href ="#">LAB 11</a></li> </ul> <li><a href="#">LAB 12-14</a> <ul class ="second-level"> <li><a href ="#">LAB 12</a></li> <li><a href ="#">LAB 13</a></li> <li><a href ="#">LAB 14</a></li> </ul> </ul> <section class="sec1"></section> <section class="sec2"> <h2>CSS Sticky Navigation Bar</h2> <p>Insert text here.</p> </section> <section class="sec3"></section> </body> </html>
3 个解决方案
解决方案1
0 2019-03-04 06:05:02
Increase the padding of the first-level ul. 增加第一级ul的填充。 It will hide the overflowing buttons 它将隐藏溢出的按钮
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; src: url('space-mono-v4-latin-regular.eot'); src: local('Space Mono'), local('SpaceMono-Regular'), url('space-mono-v4-latin-regular.eot?#iefix') format('embedded-opentype'), url('space-mono-v4-latin-regular.woff2') format('woff2'), url('space-mono-v4-latin-regular.woff') format('woff'), url('space-mono-v4-latin-regular.ttf') format('truetype'), url('fonts/space-mono-v4-latin-regular.svg#SpaceMono') format('svg'); } body { margin: 0; padding: 0; font-family: 'Space Mono', monospace; background: #000; } header { padding: 10px 100px; box-sizing: border-box; } section { width: 100%; height: 100vh; } section.sec1 { background: orange; background-size: cover; background-position: top; background-attachment: fixed; } section.sec2 { padding: 100px; box-sizing: border-box; height: auto; } section.sec2 h2 { font-size: 3em; margin: 0; padding: 0 0 20px; color: #fff; } section.sec2 p { font-size: 1.2em; margin: 0; padding: 0; color: #fff; } section.sec3 { background: url(bg2.jpg); background-size: cover; } .first-level { list-style: none; text-align: center; padding: 0px; margin: 0px; position: sticky; top: 10px; padding:12px; } .first-level a { text-decoration: none; line-height: 40px; color: #fff; } .first-level li { position: relative; text-align: center; display: inline-block; height: 40px; width: 160px; background: rgba(0,0,0,0.4); } .first-level > li:hover { background-color: teal; } .second-level { display: none; } .third-level { display: none; }
<!DOCTYPE html> <html> <head> <title>NavigationBar</title> <link rel="stylesheet" href="newnavbar.css" type="text/css"> </head> <body> <ul class ="first-level"> <li><a href="#">HOME</a></li> <li><a href="#">LAB 1-5</a> <ul class ="second-level"> <li><a href ="#">LAB 1</a></li> <li><a href ="#">LAB 2</a></li> <li><a href ="#">LAB 4</a></li> <li><a href ="#">LAB 5</a></li> </ul> <li><a href="#">LAB 6-8</a> <ul class ="second-level"> <li><a href ="#">LAB 6</a></li> <li><a href ="#">LAB 7</a></li> <li><a href ="#">LAB 8</a></li> </ul> <li><a href="#">LAB 9-11</a> <ul class ="second-level"> <li><a href ="#">LAB 9</a></li> <li><a href ="#">LAB 10</a></li> <li><a href ="#">LAB 11</a></li> </ul> <li><a href="#">LAB 12-14</a> <ul class ="second-level"> <li><a href ="#">LAB 12</a></li> <li><a href ="#">LAB 13</a></li> <li><a href ="#">LAB 14</a></li> </ul> </ul> <section class="sec1"></section> <section class="sec2"> <h2>CSS Sticky Navigation Bar</h2> <p>Insert text here.</p> </section> <section class="sec3"></section> </body> </html>
解决方案2
0 已采纳 2019-03-04 06:08:38
Change top: 10px to top :0; 将top: 10px更改为top :0;
Add display: flex and justify-content: center and background: orange; 添加display: flex和justify-content: center和background: orange; on .first-level 在。一级
Remove display: inline-block; 删除显示：inline-block; from .first-level li 来自.first-level li
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; src: url('space-mono-v4-latin-regular.eot'); src: local('Space Mono'), local('SpaceMono-Regular'), url('space-mono-v4-latin-regular.eot?#iefix') format('embedded-opentype'), url('space-mono-v4-latin-regular.woff2') format('woff2'), url('space-mono-v4-latin-regular.woff') format('woff'), url('space-mono-v4-latin-regular.ttf') format('truetype'), url('fonts/space-mono-v4-latin-regular.svg#SpaceMono') format('svg'); } body { margin: 0; padding: 0; font-family: 'Space Mono', monospace; background: #000; } header { padding: 10px 100px; box-sizing: border-box; } section { width: 100%; height: 100vh; } section.sec1 { background: orange; background-size: cover; background-position: top; background-attachment: fixed; } section.sec2 { padding: 100px; box-sizing: border-box; height: auto; } section.sec2 h2 { font-size: 3em; margin: 0; padding: 0 0 20px; color: #fff; } section.sec2 p { font-size: 1.2em; margin: 0; padding: 0; color: #fff; } section.sec3 { background: url(bg2.jpg); background-size: cover; } .first-level { list-style: none; text-align: center; padding: 0px; margin: 0px; position: sticky; top: 0; display: flex; justify-content: center; background: orange; } .first-level a { text-decoration: none; line-height: 40px; color: #fff; } .first-level li { position: relative; text-align: center; height: 40px; width: 160px; background: rgba(0, 0, 0, 0.4); } .first-level>li:hover { background-color: teal; } .second-level { display: none; } .third-level { display: none; }
<ul class="first-level"> <li><a href="#">HOME</a></li> <li><a href="#">LAB 1-5</a> <ul class="second-level"> <li><a href="#">LAB 1</a></li> <li><a href="#">LAB 2</a></li> <li><a href="#">LAB 4</a></li> <li><a href="#">LAB 5</a></li> </ul> <li><a href="#">LAB 6-8</a> <ul class="second-level"> <li><a href="#">LAB 6</a></li> <li><a href="#">LAB 7</a></li> <li><a href="#">LAB 8</a></li> </ul> <li><a href="#">LAB 9-11</a> <ul class="second-level"> <li><a href="#">LAB 9</a></li> <li><a href="#">LAB 10</a></li> <li><a href="#">LAB 11</a></li> </ul> <li><a href="#">LAB 12-14</a> <ul class="second-level"> <li><a href="#">LAB 12</a></li> <li><a href="#">LAB 13</a></li> <li><a href="#">LAB 14</a></li> </ul> </ul> <section class="sec1"></section> <section class="sec2"> <h2>CSS Sticky Navigation Bar</h2> <p>Insert text here.</p> </section> <section class="sec3"></section>
解决方案3
0 2019-03-04 06:13:02
Change background-color of first-level because its position:sticky so applying css of body and top:0px; 更改first-level背景颜色，因为它的位置是：粘性，因此请使用body和top：0px的CSS； and remove space between li element font-size:0px to first-level and five font-size to first-level li 并删除li元素font-size：0px到first-level和五个font-size到first-level li
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; src: url('space-mono-v4-latin-regular.eot'); src: local('Space Mono'), local('SpaceMono-Regular'), url('space-mono-v4-latin-regular.eot?#iefix') format('embedded-opentype'), url('space-mono-v4-latin-regular.woff2') format('woff2'), url('space-mono-v4-latin-regular.woff') format('woff'), url('space-mono-v4-latin-regular.ttf') format('truetype'), url('fonts/space-mono-v4-latin-regular.svg#SpaceMono') format('svg'); } body { margin: 0; padding: 0; font-family: 'Space Mono', monospace; background: #000; } header { padding: 10px 100px; box-sizing: border-box; } section { width: 100%; height: 100vh; } section.sec1 { background: orange; background-size: cover; background-position: top; background-attachment: fixed; } section.sec2 { padding: 100px; box-sizing: border-box; height: auto; } section.sec2 h2 { font-size: 3em; margin: 0; padding: 0 0 20px; color: #fff; } section.sec2 p { font-size: 1.2em; margin: 0; padding: 0; color: #fff; } section.sec3 { background: url(bg2.jpg); background-size: cover; } .first-level { list-style: none; text-align: center; padding: 0px; margin: 0px; position: sticky; top: 0px; background:orange; font-size:0px; } .first-level a { text-decoration: none; line-height: 40px; color: #fff; } .first-level li { position: relative; text-align: center; display: inline-block; height: 40px; width: 160px; background: rgba(0,0,0,0.4); font-size:12px; } .first-level > li:hover { background-color: teal; } .second-level { display: none; } .third-level { display: none; }
<!DOCTYPE html> <html> <head> <title>NavigationBar</title> <link rel="stylesheet" href="newnavbar.css" type="text/css"> </head> <body> <ul class ="first-level"> <li><a href="#">HOME</a></li> <li><a href="#">LAB 1-5</a> <ul class ="second-level"> <li><a href ="#">LAB 1</a></li> <li><a href ="#">LAB 2</a></li> <li><a href ="#">LAB 4</a></li> <li><a href ="#">LAB 5</a></li> </ul> <li><a href="#">LAB 6-8</a> <ul class ="second-level"> <li><a href ="#">LAB 6</a></li> <li><a href ="#">LAB 7</a></li> <li><a href ="#">LAB 8</a></li> </ul> <li><a href="#">LAB 9-11</a> <ul class ="second-level"> <li><a href ="#">LAB 9</a></li> <li><a href ="#">LAB 10</a></li> <li><a href ="#">LAB 11</a></li> </ul> <li><a href="#">LAB 12-14</a> <ul class ="second-level"> <li><a href ="#">LAB 12</a></li> <li><a href ="#">LAB 13</a></li> <li><a href ="#">LAB 14</a></li> </ul> </ul> <section class="sec1"></section> <section class="sec2"> <h2>CSS Sticky Navigation Bar</h2> <p>Insert text here.</p> </section> <section class="sec3"></section> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
我如何摆脱这个黑色的酒吧？ - How do i get rid of this black bar?
Firefox 上的样式滚动条。 如何摆脱滚动条上的黑色边框/轮廓？ - Styling scroll bar on Firefox. How to get rid of black border/outline on scroll bar?
摆脱滚动条 - get rid of scroll bar
努力摆脱模板上的黑匣子 - Struggling to get rid of a black box on a template
摆脱外部滚动条 - Get rid of the outer scroll bar
如何摆脱滚动条？ - How To Get Rid of Scroll Bar?
CSS-无法摆脱利润 - CSS - Cannot get rid of margin
我可以去掉 Flexdashboards 中的顶部栏吗？ - Can I get rid of the top bar in Flexdashboards?
如何摆脱酒吧周围的白色边框 - How to get rid of a white border around a bar
如何摆脱水平滑杆引导程序3 - How to get rid of horizontal slide bar bootstrap 3
相关标签