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

【问题标题】：DIV tag not showing all elements inlineDIV 标记未显示所有内联元素
【发布时间】：2018-03-27 07:21:58
【问题描述】：

我正在尝试使用 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>

这是结果

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案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>

【讨论】：