请帮助我，让我知道我在哪里犯了错误，因为我无法使导航栏中的选项进入右侧。我在这里分享代码。
<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>
您的代码不足以为您提供完美的解决方案。然而，这是我的镜头：
我假设您拥有的包装容器<div> ... </div>跨越了视口宽度的100%？如果是这种情况，您可以添加以下样式属性：
<div style="display: flex; justify-content: flex-end;">
<nav>
// rest of the HTML code in your example
</nav>
</div>
当然，对于更干净的解决方案，您可以添加一个CSS类，并在文档<head>:中的单独样式表文件或style标记中对其进行样式设置，而不是添加内联style属性
<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
}
您是否考虑过使用flex box？https://www.youtube.com/watch?v=K74l26pE4YAFlex box对于列表中项目的定位和布局非常有用。查看一些可以证明内容合理性的方法：https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
此外，每个单独的项目都可以与自身对齐。
这是一种相当强大的组织内容的方式。在回答这个问题时，我们还不能看到你的所有css，但如果你还没有使用flexbox，我会看第一个视频，或者如果你有一个bug，我会看看它是如何工作的。在这种情况下，它可能对你有用！