html - 我试图让我的导航位于页面的右侧,目前它在中间

标签 html css navigation

css1 of 4
css2of 4
css3 of 4
css4 of 4
snip
我试图让我的导航位于页面的右侧,目前它在中间。我对css做了一些事情,无法弄清楚我做了什么,现在导航不会回到页面的右侧,它卡在中间。

.sample-css{
}
<html>

<head>


</head>

<body>
  <div class="flex-container">
    <div class="container">
      <div class="nav-wrapper">
        <div class="left-side">
          <div class="container-logo">
            <div>
              <a name="top"></a>
            </div>
            <div>
              <a href="index.html"><img src="images/Logofor Web1-01.png" alt="Morpheus Design Studios Logo" style="width: 149px; height: 100px;" /></a>
            </div>
          </div>
        </div>
        <div class="nav-wrapper">
          <div class="right-side">
            <div class="nav-link-wrapper"><a href="index.html">HOME</a></div>
            <div class="nav-link-wrapper"><a href="gallery.html">GALLERY</a></div>
            <div class="nav-link-wrapper"><a href="about.html">ABOUT</a></div>
            <div class="nav-link-wrapper"><a href="contact.html">CONTACT</a></div>
            <div class="dropdown">
              <div class="conbtn">
                <div class="nav-link-wrapper">
                  <a href="services.html">SERVICES</a>

                  <div class="dropdown-content"><a href="graphicdesign.html">Graphic Design</a><a href="photography.html">Photography</a><a href="printing.html">Professional Printing</a></div>
                </div>
              </div>
            </div>
          </div>
          <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
          </div>
        </div>
      </div>

    </div>
</body>

</html>

最佳答案

更改以下内容:

.nav-wrapper {
  justify-content: center;
}

到:

.nav-wrapper {
  justify-content: flex-end;
}

阅读更多:justify-content (MDN)

关于html - 我试图让我的导航位于页面的右侧,目前它在中间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62269592/

相关文章:

html - 如何在 HTML 关键字中使用 unicode 字符?

html - 如何在html中隐藏一个<li>项并且不占用任何空间?

javascript - chrome浏览器的滚动条 "overlaps"UI而不是推送

html - 为什么我的 UL 菜单不起作用?

html - css横向导航问题

jquery - 如何使用 jQuery 检测浏览器是否关闭

javascript - jquery 从 html 方法中排除元素

javascript - 从应用了 'overflow: scroll/auto' 样式的 div 中删除可拖动元素?

css - 如何在 ng-option 中为每个选项应用 font-family

Javascript - 循环 3 个函数,每个函数之间有延迟