我想以一种非花哨的方式在我的导航栏中移动

Question

我对 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;
}

我想要完成的是从右边缘移动我的导航栏链接。 所以“关于”的结尾有点与第三张图片的结尾对齐。

我尝试的是在导航 class 中添加大量填充。 然而，这感觉超级花哨，而且它根本不能很好地扩展。 因为只要你移动 window 哪怕一点点，它都会出错。

应该有更好的方法来做到这一点，但我觉得有点卡住了。

Answer 1

所以这应该是你要找的，我用过 css position：粘； 并且在 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; // These r the 2 lines i added 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>

Answer 2

你必须给你的导航栏一个宽度来使用，因为你已经将justify-content设置为flex-end它总是在最后，这取决于你设置的宽度。

给你的导航栏一个合理的宽度，并与第三张图片对齐。

最终代码：

header nav {
    display: flex;
    justify-content: flex-end;
    height: 100%;
    width: --your-desirable-width;
    margin-right: auto;
}

这是负责任的，它将永远占屏幕的..%。