时间戳

首页 > 解决方案 > 如何使导航栏菜单选项在右侧移动？

html - 如何使导航栏菜单选项在右侧移动？

问题描述

请帮助并让我知道我在哪里犯了错误，因为我无法使导航栏中的选项进入右侧。我在这里分享代码。

<div>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" style="padding-left: 40px; padding-right: 40px;">
            
            <div style="float: left;">
                <a class="navbar-brand" href="homePage.php">Job Portal</a>
            </div>
            
            <div class="topnav-right" style="float: right;">
                <a href="homePage.php">
                    <button class="btn btn-outline-success" type="button" >
                        Home
                    </button>
                </a>
                
                <a href="signinPageOfJobSeekers.php">   
                    <button class="btn btn-outline-success" type="button">
                        Sign In or Sign up
                    </button>
                </a>    

                <button class="btn btn-outline-success" type="button">
                    Contact Us
                </button>

                <?php if(!empty($_SESSION['userName'])){ ?>
                        <a href="logOut.php">
                            <button class="btn btn-outline-success" type="button">
                                Log Out
                            </button>
                        </a>
                
                <?php   } ?>

            </div>
                
        </nav>

    </div>

标签： htmlcssweb-deployment

解决方案

您的代码不足以为您提供完美的解决方案。但是，这是我的镜头：

我假设<div> ... </div>您拥有的包装容器跨越视口宽度的 100%？如果是这种情况，您可以添加以下样式属性：

<div style="display: flex; justify-content: flex-end;">
   <nav>
      // rest of the HTML code in your example
   </nav>
</div>

当然，为了更简洁的解决方案，style您可以添加一个 CSS 类并将其设置在单独的样式表文件或style文档中的标签中，而不是添加内联属性<head>：

<div class="nav-wrapper">
   <nav>
      // rest of the HTML code in your example
   </nav>
</div>

然后在你的 CSS 声明中

.navWrapper {
  display: flex;
  justify-content: flex-end;
}

替代解决方案

如果您对与页面内容的其余部分重叠的导航感到满意，则始终position: fix可以。这样，它将从文档流中取出并覆盖在页面上的其他 HTML 元素之上。这是所需的CSS：

.nav-wrapper {
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 999; // <- increase this value if any elements are on top of your nav
}

推荐阅读