在同一行上-引导程序

Question

我有此代码：

 <div class="well sidebar-nav">
    <ul class="nav nav-list">
      <li class="nav-header">Pacientes</li>
      <li class="active"><a href="#"><img src="../../img/catalogo_pacientes.png"/></a></li>
      <li><a href="#">Editar Paciente</a></li>
      <li><a href="#"><img src="../../img/add_paciente.png"/></a></li>
      <li class="nav-header">Administrativo</li>
      <li><a href="#"><img src="../../img/exportar_dados.png"/></a></li>
      <li><a href="#">Adicionar Campos</a></li>
    </ul>
  </div><!--/.well -->

由于li内容停留在同一行上，最好在它们之间加一些填充，因此无法弄清楚如何使它变为行。

我正在使用display：inline进行一些测试，但是我找不到正确的方法将其放在CSS上

-编辑-

我在这里有一些问题需要添加评论，所以我将在这里进行编辑。

您提供的解决方案有效！谢谢！

Answer 1

要在一行上显示列表，css必须具有display: inline属性。此属性必须应用于li元素。

此CSS可以正常工作。也请注意填充。

ul li {
  display: inline;
  padding: 10px;
}

同时编码时，请给您的<ul>元素一个ID，然后将CSS应用于该ID，而不是将其应用于通用<li>元素。

JSFIDDLE DEMO

Answer 2

如果使用的是Bootstrap 4，则可以使用Flexbox实用程序作为内联样式的更干净的替代方法。我遇到了类似的问题，使<li>中的字形和文字保持在同一行。这是我解决问题的方法。

<ul class="nav navbar navbar-left d-flex d-inline-flex ">
  <li class="nav-item d-inline-flex  align-items-center mr-2"><a class="nav-link d-inline-flex" href="#"><i class="fa fa-user-o mr-2" aria-hidden="true"></i>Login</a></li>
  <li class="nav-item d-inline-flex  align-items-center mr-2"><a class="nav-link d-inline-flex" href="#"><i class="fa fa-pencil-square-o mr-2" aria-hidden="true"></i>Register</a></li>
</ul>

这里我使用的是Font Awesome的字形图标。

这里是一个JSFiddle，它使用无序列表上的.list-inline和.list-inline-item类。

这里是另一个JSFiddle，它也可以使用并在Bootstrap 4中使用内联Flexbox。

两种方法都可以。