如何右键对齐导航栏中的文本 - HTML

Question

＆＃13;

＆＃13;

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

＆＃13;

＆＃13;

＆＃13;

所以我最近刚开始在自己的时间练习HTML和CSS。我刚开始使用bootstrap构建网站，但我在使用此导航栏时遇到问题：navbar您可以在此网站上找到它：https://getbootstrap.com/docs/4.0/components/navbar/ 并向下滚动到＆＃34;导航＆＃34; （我不知道如何在这里包含HTML代码）

我想要做的是拥有＆＃34; Home＆＃34; ＆＃34;特征＆＃34; ＆＃34;定价和＃34;和＃34;已禁用＆＃34; ＆＃34;搜索＆＃34; （我将实施的搜索栏）向右浮动。最终我会有类似的东西：

的NavBar ---------------------------------------------- -------------------主页功能定价已禁用#Search

但我似乎无法做到。我试过使用span标签，ul标签，我试图删除一些div元素，但没有任何工作。有什么帮助吗？

我也有一个问题。如果我把：     ＆＃34;导航栏＆＃34; 在div中，然后它仍然与其他导航元素（Home，Pricing等...）内联，这些元素位于不同的div中。怎么可能？ Aren不会阻止块元素吗？

Answer 1

学习并使用FlexBox

这是一个非常强大的css布局库，大多数浏览器都支持它。

查看导航栏的示例。您可以通过多种方式对齐。一种方法是在nav元素的左侧有一个空元素，占用剩余的空间，将元素一直推到右边。

为Bootstrap示例实现此目的

我所做的就是添加

<div style="flex-grow: 1;"></div>

正下方

<div class="collapse navbar-collapse" id="navbarSupportedContent">

正上方

<ul class="navbar-nav mr-auto">

Answer 2

如果您只想使用Bootstrap功能，可以通过使用以下链接包含链接来实现此目的：

<ul class="nav navbar-nav navbar-right">
  <links>
</ul>

不使用bootstrap：

.align-left { float: left }
.align-right { float: right }

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="align-left">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse align-right" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
  <div style="clear: both;"></div>
</nav>

Answer 3

您可以使用班级mr-auto来修复右侧的元素。

您的代码将变为：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav mr-auto">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>