无法使导航栏链接内联显示[重复]答案

【问题标题】：Can't make navbar links be displayed inline [duplicate]无法使导航栏链接内联显示[重复]
【发布时间】：2021-07-12 12:35:56
【问题描述】：

导航栏链接显示为块而不是内联，即使我使用的是 <div style="display: inline-block;">，如在此处的另一篇文章中所示

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

  <title>Navbar</title>
</head>

<body>
  <h1>Navbar</h1>
  <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Navbar</a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div style="display: inline-block;">
      <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
          <a class="nav-link" href="#">Register</a>
          <a class="nav-link" href="#">Sign In</a>
        </li>
      </ul>
    </div>
  </nav>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

</body>

</html>

【问题讨论】：

您不需要任何额外的 CSS 来使它们内联。链接的结构不正确，并且没有 navbar-expand 类。 Read the docs 并使用 correct navbar structure

标签： css twitter-bootstrap

【解决方案1】：

目前，您的导航栏链接的父 div 是内联的，所以我假设您指的是链接本身出现在彼此之上而不是并排显示。要解决此问题，只需将您在父级上使用的相同样式应用于链接本身。

这里有两种解决方法，具体取决于您更喜欢 HTML 文件还是外部 CSS 文件中的解决方案。 没有必要同时包含这两种解决方案。

<a style="display: inline-block" class="nav-link" href="#">Register</a>
<a style="display: inline-block" class="nav-link" href="#">Sign In</a>

li > .nav-link {
  display: inline-block;
}

【讨论】：

它不起作用。你在我的 sn-p 上试过了吗？
是的，我在 codepen 和 stackoverflow 编译器上都运行了它。确保将各个锚标记设置为 display: inline-block，这是您提交的代码中缺少的键。