<li> 使导航栏中的一个项目向左浮动，其余项目向右浮动(引导程序 5)

Question

我正在做我的第一个html/css项目，我正在使用bootstrap。我以前使用Blogger有一点html的经验。

当我的导航栏展开时，我希望第一个li项(一个按钮)浮动到页面的左侧，其余部分浮动到右侧。

我可以使用flex-start或flex-end让所有项目以一种方式或另一种方式浮动，但我似乎无法将其应用于此单个元素。我尝试使用margin-right属性来强制它，但结果非常不一致。

我也研究了一堆代码示例，我发现的唯一解决方案是将按钮视为徽标，当它变成汉堡包时不会塌陷到导航菜单中。

<nav class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li>
<a id="resumebutton" class="btn btn-outline-primary" href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

我写的任何自定义CSS都只是为了覆盖颜色和字体，所以我认为它不会影响任何东西，但如果有人需要仔细检查，我可以添加它。

提前感谢。

Answer 1

这段代码似乎把'Download Resume'按钮放在了中型屏幕和更大屏幕的左侧

<nav class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-dark collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div id="main-navigation" style="" class="navbar-collapse justify-content-between collapse">
<div>
<a id="resumebutton" class="btn btn-outline-primary" href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

Answer 2

您可以设置第一个li的width: 100%，以便它从左侧获取所有可用的空格。

并在父元素(ul)上使用flex-end，使子元素的其余部分向右移动。

.navbar-nav{
display: flex;
justify-content: flex-end;
}
.navbar-nav li:first-child{
width: 100%;
}

<nav class="navbar navbar-expand-md">
<button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li>
<a id="resumebutton" class="btn btn-outline-primary" href="ResumeWeb.pdf" target="_blank">Download Resumé</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>