javascript - 如何在导航栏中右对齐文本 - HTML

Question

<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>

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

我想要做的是将项目“主页”“功能”“定价”和“禁用”“搜索”（我将实现的搜索栏）浮动到右侧。最终我会有类似的东西：

导航栏------------------------------------------------ ----------------家庭功能定价已禁用#Search

但我似乎做不到。我尝试使用 span 标签、ul 标签，我尝试删除一些 div 元素但没有任何效果。有什么帮助吗？

我还有一个问题。如果我将：“Navbar”放在一个 div 中，那么它仍然与位于不同 div 中的其他导航元素（主页、定价等）内联。这怎么可能？divs不是块元素吗？

标签： javascripthtmlcssnavbar

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">