使用 html 和 CSS 导航栏周围的边距问题
我正在使用 html 和 CSS 创建一个演示作品集（仍处于最初阶段）。尽管我已在样式表上将全局边距设置为 0，但我的导航栏各边都有边距，但我遇到了问题。我的目标是让导航栏跨越视口的宽度，周围没有边距（底部除外）。我以前没有遇到过这个问题，因此非常感谢您的任何建议！
我的HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylsheet" type="text/css" href="Personal Portfolio Stylsheet.css">
<title>Personal Portfolio</title>
</head>
<header>
<nav id="navbar">
<ul type="none">
<li href="#About">About</li>
<li href='#Work'>Work</li>
<li href='#Contact'>Contact</li>
</ul>
</nav>
</header>
<body>
<section id="welcome-section">
<h1>Liam McBride</h1>
<h2><i>Web Developer</i></h2>
</section>
<section id="projects">
<h1>Portfolio</h1>
</section>
<section id="contact-info">
<h1>Reach out to me at any of the following links:</h1>
</section>
</body>
</html>
和CSS：
@import url('https://fonts.googleapis.com/css?family=EB+Garamond|Roboto&display=swap')
/* To call fonts, use the following:
font-family: 'EB Garamond', serif;
font-family: 'Roboto', sans-serif; */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Box sizing border box means that padding and border width are included in the total width for all elements. */
:root {
--color-off-white: #fff6f6;
--color-aluminum: #c4c4c4;
--color-charcoal: #494646;
--color-black: #1f1919;
--color-navy: #6385b1;
--color-deep-water: #1a3861;
}
#navbar{
width: 100%;
background-color: var(--color-navy);
border-bottom: 0.1em solid;
margin: 0 0 1em 0;
}
nav>ul {
font-family: 'EB Garamond', serif;
font-weight: bold;
font-size:1.15em;
display: flex;
justify-content: space-around;
padding: 0.5em 0.7em 0.1em 50em;
}
header {
position: relative;
padding: 0;
}
GCT10151回答
-
潇潇雨雨
只需将 body 和 nav>ul margin 设置为 0@import url('https://fonts.googleapis.com/css?family=EB+Garamond|Roboto&display=swap') /* To call fonts, use the following: font-family: 'EB Garamond', serif;font-family: 'Roboto', sans-serif; */*{ margin: 0; padding: 0; box-sizing: border-box;}body{margin:0;}/* Box sizing border box means that padding and border width are included in the total width for all elements. */:root { --color-off-white: #fff6f6; --color-aluminum: #c4c4c4; --color-charcoal: #494646; --color-black: #1f1919; --color-navy: #6385b1; --color-deep-water: #1a3861;}#navbar{ width: 100%; background-color: var(--color-navy); border-bottom: 0.1em solid; margin: 0 0 1em 0;}nav>ul { font-family: 'EB Garamond', serif; font-weight: bold; font-size:1.15em; display: flex; justify-content: space-around; padding: 0.5em 0.7em 0.1em 50em; margin:0;}header { position: relative; padding: 0;}<html> <head> <link rel="stylsheet" type="text/css" href="Personal Portfolio Stylsheet.css"> <title>Personal Portfolio</title> </head> <header> <nav id="navbar"> <ul type="none"> <li href="#About">About</li> <li href='#Work'>Work</li> <li href='#Contact'>Contact</li> </ul> </nav> </header> <body> <section id="welcome-section"> <h1>Liam McBride</h1> <h2><i>Web Developer</i></h2> </section> <section id="projects"> <h1>Portfolio</h1> </section> <section id="contact-info"> <h1>Reach out to me at any of the following links:</h1> </section> </body></html>
随时随地看视频慕课网APP
相关分类
Html5