如何在导航栏-HTML中正确对齐文本?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (225)

<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。我刚开始使用引导程序创建一个网站,我在这个导航栏上遇到了麻烦: 你可以在这个网站上找到它:https://getbootstrap.com/docs/4.0/components/navbar/然后向下滚动到“Nav”(我不知道如何在这里包含HTML代码)

我想做的是让“主页”、“特色”、“定价”和“禁用”搜索“(我将实施的搜索栏)浮动到右边。最终我会得到这样的东西:

NavBar-Home特性定价禁用#Search

但我似乎做不到。我试过使用span标记,ul标记,我尝试删除了一些div元素,但是没有什么效果。有什么帮助吗?

提问于
用户回答回答于

你可以用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>
用户回答回答于

学习和使用FlexBox

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

这里有一个NaVBar的例子。有很多方法你可以右对齐。一种方法是在NAV元素的左边有一个空元素,它占用剩余的空间,把元素推到右边。

要实现这一点,请参见Bootstrap示例

我所做的只是加上

<div style="flex-grow: 1;"></div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">

扫码关注云+社区

领取腾讯云代金券