我正在使用 html 和 CSS 創(chuàng)建一個(gè)演示作品集（仍處于最初階段）。盡管我已在樣式表上將全局邊距設(shè)置為 0，但我的導(dǎo)航欄各邊都有邊距，但我遇到了問(wèn)題。我的目標(biāo)是讓導(dǎo)航欄跨越視口的寬度，周?chē)鷽](méi)有邊距（底部除外）。我以前沒(méi)有遇到過(guò)這個(gè)問(wèn)題，因此非常感謝您的任何建議！我的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;}
1 回答
瀟瀟雨雨
TA貢獻(xiàn)1833條經(jīng)驗(yàn) 獲得超4個(gè)贊
只需將 body 和 nav>ul margin 設(shè)置為 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>
- 1 回答
- 0 關(guān)注
- 153 瀏覽
添加回答
舉報(bào)
0/150
提交
取消