我对HMTL和CSS非常陌生，以前刚刚用C#进行过编码。
我这儿有把小提琴https://jsfiddle.net/4asrj9x6/24/
<html>
<header>
<body>
<nav>
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<main class="grid">
<aside></aside>
<section>
<h1>Header</h1>
<img src="https://via.placeholder.com/620x350.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<section>
<h1>Header</h1>
<img src="http://placehold.it/620x350.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<section>
<h1>Header</h1>
<img src="http://placehold.it/620x350.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<aside></aside>
</main>
</body>
</html>
* {
box-sizing: border-box;
}
header {
margin-top: none;
width: 100%;
height: 80px;
filter: drop-shadow(0px 8px 8px hsla(0, 0%, 0%, 0.24));
background-color: whitesmoke;
}
header nav {
display: flex;
justify-content: flex-end;
height: 100%;
}
.navigation {
list-style-type: none;
display: inline;
}
li a{
display: block;
text-align: center;
text-decoration: none;
}
.navigation li {
display: inline-flex;
height: 100%;
padding: 10px;
font-size: 24px;
}
main {
display: grid;
grid-template-columns: 20% 20% 20% 20% auto;
grid-gap: 20px;
}
aside {
margin: none;
}
section h1 {
text-align: center;
font-size: 24;
font-weight: bold;
}
section img {
width: 100%;
}
section img:hover {
opacity: 50%;
transition: 0.1s;
}
section p {
font-size: 18px;
}
我想完成的是从右边缘移动导航栏链接。因此，"About"的末尾与第三个图像的末尾对齐。
我所尝试的是在导航类中添加大量填充。然而，这感觉超级噱头，而且它的规模一点也不好。因为只要你稍微移动一下窗户，就会出现问题。
应该有更好的方法来做这件事，但我觉得有点卡住了。
您必须给导航栏一个宽度，因为您将justify-content设置为flex-end，它将始终位于末尾，具体取决于您设置的宽度。
给你的导航栏一个合理的宽度，并与第三张图片对齐。
最终代码：
header nav {
display: flex;
justify-content: flex-end;
height: 100%;
width: --your-desirable-width;
margin-right: auto;
}
这是有责任的，而且永远是..%屏幕的。
所以这应该是你想要的，我使用了css位置：stick；并且在标题的样式中只添加了2行代码
<html>
<body>
<style>
* {
box-sizing: border-box;
}
header {
margin-top: none;
width: 100%;
height: 80px;
filter: drop-shadow(0px 8px 8px hsla(0, 0%, 0%, 0.24));
background-color: whitesmoke;
position: sticky;
top: 0;
}
header nav {
display: flex;
justify-content: flex-end;
height: 100%;
}
.navigation {
list-style-type: none;
display: inline;
}
li a{
display: block;
text-align: center;
text-decoration: none;
}
.navigation li {
display: inline-flex;
height: 100%;
padding: 10px;
font-size: 24px;
}
main {
display: grid;
grid-template-columns: 20% 20% 20% 20% auto;
grid-gap: 20px;
}
aside {
margin: none;
}
section h1 {
text-align: center;
font-size: 24;
font-weight: bold;
}
section img {
width: 100%;
}
section img:hover {
opacity: 50%;
transition: 0.1s;
}
section p {
font-size: 18px;
}
</style>
<header>
<nav>
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<main class="grid">
<aside></aside>
<section>
<h1>Header</h1>
<img src="https://via.placeholder.com/620x350.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<section>
<h1>Header</h1>
<img src="http://placehold.it/620x350.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<section>
<h1>Header</h1>
<img src="http://placehold.it/620x350.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Est ultricies integer quis auctor elit sed vulputate mi. Aenean pharetra magna ac
placerat vestibulum. Velit euismod in pellentesque massa. Bibendum neque egestas congue quisque egestas
diam in arcu. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Sit amet mauris
commodo quis imperdiet massa. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper.
</p>
</section>
<aside></aside>
</main>
</body>
</html>