DIV标记未显示内联的所有元素

Question

我尝试使用Bootstrap 4创建导航栏，但在我的div标签中，项目不是内联的，我无法将导航项目对齐

这是HTML

<nav class="navbar navbar-inverse ">
        <div style="display:inline">
            <ul class="nav navbar">
                <li>
                     <button id="sidebarToggle" class="btn btn-primary">
                         <i class="fa fa-angle-double-left"></i>
                     </button>

                </li>
            </ul>
            <span><a asp-controller="App" asp-action="Index" class="navbar-brand" style="color:cornflowerblue">The World</a></span>
            <ul class="nav navbar">
                <li>
                    <a href="#" class="btn btn-sm btn-info">
                        <i class="fa fa-save"></i>Save
                    </a>
                </li>
            </ul>
        </div>
    </nav>

这是结果

Answer 1

只需将内联样式（如果您愿意）更改为：

<div style="display: flex; justify-content: flex-end; align-items: center">

<nav class="navbar navbar-inverse ">
  <div style="display: flex; justify-content: flex-end; align-items: center">
    <ul class="nav navbar">
      <li>
        <button id="sidebarToggle" class="btn btn-primary">
          <i class="fa fa-angle-double-left"></i>
        </button>
      </li>
    </ul>
    <span><a asp-controller="App" asp-action="Index" class="navbar-brand" style="color: cornflowerblue">The World</a></span>
    <ul class="nav navbar">
      <li>
        <a href="#" class="btn btn-sm btn-info">
          <i class="fa fa-save"></i>Save
        </a>
      </li>
    </ul>
  </div>
</nav>

display: flex使div处于响应状态并默认显示子项内嵌，justify-content: flex-end水平向右对齐ul，align-items: center将其垂直居中于该div内

解决问题的合适方法还包括：

<nav class="navbar navbar-inverse">
  <div style="text-align: right">
    <ul class="nav navbar" style="display: inline-block">
      <li>
        <button id="sidebarToggle" class="btn btn-primary">
          <i class="fa fa-angle-double-left"></i>
        </button>
      </li>
    </ul>
    <span><a asp-controller="App" asp-action="Index" class="navbar-brand" style="color: cornflowerblue">The World</a></span>
    <ul class="nav navbar" style="display: inline-block">
      <li>
        <a href="#" class="btn btn-sm btn-info">
          <i class="fa fa-save"></i>Save
        </a>
      </li>
    </ul>
  </div>
</nav>