https://i.stack.imgur.com/3hzl7.png
所以我正在創建我的網站，但我的導航欄與標題 (h1) 不一致。我如何解決它
我是 HTML 和 CSS 的新手。所以任何幫助都是有益的。請我需要這么快...
#header {
background-color: #39A15A;
}
#navigation {
overflow: hidden;
}
ul {
list-style-type: none;
}
li {
display: inline;
float: right;
}<!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" href="style.css">
<title>Learning</title>
</head>
<header>
<div id="header">
<h1>Filip Moslavac</h1>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Contact Page/contact.html">Contact</a></li>
<li><a href="Project Page/projects.html">Projects</a></li>
</ul>
</div>
</div>
</header>
<body>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
</div>
<div id="footer">
Copyright © 2021 Filip Moslavac
</div>
</body>
</html>uj5u.com熱心網友回復：
您可以嘗試display: flex;在您的標題上使用align-items: baseline;并使它們與您的標題一致。
我還添加了一些額外的樣式來清理它。我display: flex;在你的上面放了一個#header ul并添加了一個間隙來分隔串列項。
#header {
background-color: #39A15A;
display: flex;
justify-content: space-between;
align-items: baseline;
}
#header ul {
display: flex;
gap: 20px;
}
#navigation {
overflow: hidden;
}
ul {
list-style-type: none;
}
li {
display: inline;
float: right;
}<!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" href="style.css">
<title>Learning</title>
</head>
<header>
<div id="header">
<h1>Filip Moslavac</h1>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Contact Page/contact.html">Contact</a></li>
<li><a href="Project Page/projects.html">Projects</a></li>
</ul>
</div>
</div>
</header>
<body>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
</div>
<div id="footer">
Copyright © 2021 Filip Moslavac
</div>
</body>
</html>uj5u.com熱心網友回復：
您可以使用彈性：
#header {
background-color: #39A15A;
display: flex;
align-items: center;
justify-content: space-between;
padding: .5rem;
}
#navigation {
overflow: hidden;
}
ul {
list-style-type: none;
}
li {
display: inline;
margin: .5rem;
}<body>
<header>
<div id="header">
<h1>Filip Moslavac</h1>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Contact Page/contact.html">Contact</a></li>
<li><a href="Project Page/projects.html">Projects</a></li>
</ul>
</div>
</div>
</header>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
</div>
<div id="footer">
Copyright © 2021 Filip Moslavac
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/385329.html
上一篇：如何設定setInterval函式以處理每個單獨的元素
下一篇：阻止CSSGrid列溢位