如何删除导航栏上的右边距？
[英]How can I remove the right-margin on my nav bar?
问题描述
我对 HTML 和 CSS 比较陌生。 我正在为课程制作一个投资组合网站，但没有使用 Bootstrap。
我似乎无法摆脱页面右侧这个奇怪的小空间。 我希望我的导航栏跨越页面的整个长度！ 即使我更改了边距、填充等，我的标题图像也会发生同样的事情。我没有想法！
任何帮助/想法将不胜感激。 太感谢了！
/* GENERAL */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&family=Patrick+Hand&display=swap'); * { box-sizing: border-box; } body { background-color:#ddd; background-size: cover; font-family: 'Manrope', sans-serif; margin: 0; padding: 5px; } h1 { background-color: rgba(229, 152, 155, .7); font-family: 'Patrick Hand', cursive; font-size: 80px; margin: -5px; text-align: center; } h2 { font-family: 'Patrick Hand', cursive; } h3 { font-family: 'Manrope', sans-serif; text-align: center; } /* NAV/LINKS */ nav { background-color: white; height: 70px; margin-top: -5px; margin-right: -5px; margin-left:-5px; padding: 0; width: 100%; } nav h2 { color: black; float: left; font-size: 30px; line-height: 55px; padding: 0px 20px; } nav ul { float:right; padding: 3px 20px 20px 3px; } nav ul li { float: left; list-style: none; position: relative; } nav ul li a { display: block; color: #AC6BA7; font-size: 14px; padding: 22px 14px; text-decoration: none; } nav ul li ul { background-color: white; border-radius: 0px 0px 4px 4px; display: none; padding: 3px; position: absolute; } nav ul li:hover ul { display: block; } nav ul li ul li { border-radius: 4px; } nav ul li ul li a { padding: 8px 12px; } nav ul li ul li a:hover { background-color: #E5989B; } /* PAGE IMAGES */ .header-img { margin: -5px; width: 100%; } /* PAGES */ /* MEDIA QUERIES */ /* FOOTER */
<!------ SKELETON CODE (SAME ON ALL PAGES) ------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="css/main.css"> <title>Jen Nino: Class Website</title> </head> <body> <!------ NAV BAR (SAME ON ALL PAGES) ------> <nav> <h2>JEN NINO</h2> <ul> <li><a href="#">NAV ≡</a> <ul> <li><a href="index.html">HOME</a></li> <li><a href="webdesign.html">WORK</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </li> </ul> </nav> <!------ HEADER (SAME ON ALL PAGES, DIFF IMAGE) ------> <header> <img class="header-img" src ="images/sanfrancisco.png" alt="My husband and I in front of San Francisco Bay. There is a skyline in the background."> </header> <!------ MAIN/ARTICLE/SECTION (DIFFERENT ON PAGES) ------> <main> <h1>HOME</h1> <article class="about-me-parent"> <section class="about-me-child"> <p> Text</p> </section> <section class="about-me-child"> <p>Text </p> </section> </article> </main> <!------ FOOTER (SAME ON ALL PAGES) ------> <footer> Here </footer> </body> </html>
2 个解决方案
解决方案1
0 2022-05-17 00:06:42
您必须设置填充：0； 在正文标签中。
解决方案2
0 已采纳 2022-05-17 00:16:04
我想我可能有一些有用的意见。
我们通常使用正边距。 像
margin-top: 5px会给你一个 5px 顶部的边距。nav, h1, div... 是块元素。 这意味着它们的宽度自然是所有可用的，而
width: 100%通常不是必需的。如果您使用
width: 100%，则元素将是父元素的宽度。 因此，如果您随后应用边距，元素将被推到一侧，但元素的宽度仍将是父元素的 100%。 为避免这种情况，您可以使用width: calc(100% - 2*5px)例如。 但在你的情况下，我不建议设置任何宽度。
所以……少即是多。 如果您的 css 没有完全按照您的预期进行，Firefox 或 chrome 中的开发工具可以帮助您了解正在发生的事情。
如果导航栏遵循我在主体上设置的边距，如何阻止导航栏重叠内容？
[英]How can I stop the Nav Bar from overlapping my content if it follows the margin that I set on the body?
如何删除水平固定导航栏中列表项之间的“间隙”
[英]How can I remove the “gaps” between my list items in a horizontal fixed nav bar
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.