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进行一些测试：内联，但我无法找到将它放在CSS上的正确方法

- 编辑 -

我在这里添加评论有一些问题，所以我只想在这里编辑。

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

Answer 1

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

这个CSS可以正常工作。注意填充。

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

在编码时，请为您的<ul>元素提供ID，然后在该ID上应用CSS，而不是将其应用于通用<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的glyphicons。

以下是使用无序列表中的.list-inline和.list-inline-item类的JSFiddle。

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

任何一种方法都应该有效。

<li>在同一条线上 - Bootstrap </li>

2 个答案: