我想以一种非噱头的方式在我的导航栏中移动
I want to move in my navigation bar in a non gimmicky way
我对 HMTL 和 CSS 还很陌生，之前刚用 C# 编写过代码。
我在这里 fiddle
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' 的末尾与第三张图像的末尾对齐。
我尝试过在导航中添加大量填充 class。然而，这感觉超级花哨，而且根本无法很好地扩展。因为只要你移动 window 一点点它就会出错。
应该有更好的方法来做到这一点，但我觉得有点卡住了。
你必须给你的导航栏一个宽度才能工作，因为你有 justify-content 设置为 flex-end 它总是在最后取决于你设置的宽度。
为您的导航栏设置合理的宽度并与第三张图片对齐。
最终代码：
header nav {
display: flex;
justify-content: flex-end;
height: 100%;
width: --your-desirable-width;
margin-right: auto;
}
这是负责任的，它将始终占屏幕的 ..%。
所以这应该是你要找的，我用过css position: sticky;并且在 header
的样式中仅添加了 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>
我对 HMTL 和 CSS 还很陌生，之前刚用 C# 编写过代码。
我在这里 fiddle 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' 的末尾与第三张图像的末尾对齐。
我尝试过在导航中添加大量填充 class。然而，这感觉超级花哨，而且根本无法很好地扩展。因为只要你移动 window 一点点它就会出错。
应该有更好的方法来做到这一点，但我觉得有点卡住了。
你必须给你的导航栏一个宽度才能工作，因为你有 justify-content 设置为 flex-end 它总是在最后取决于你设置的宽度。
为您的导航栏设置合理的宽度并与第三张图片对齐。
最终代码：
header nav {
display: flex;
justify-content: flex-end;
height: 100%;
width: --your-desirable-width;
margin-right: auto;
}
这是负责任的，它将始终占屏幕的 ..%。
所以这应该是你要找的，我用过css position: sticky;并且在 header
的样式中仅添加了 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>