0

我有这个代码：

 <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 上的正确方法

- 编辑 -

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

您提出的解决方案奏效了！谢谢！

4

2 回答 2

0

如果您使用的是 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 中使用并使用内联弹性框。

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

于 2018-01-21T04:06:15.003 回答
0

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

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

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

编码时，请给你的<ul>元素一个 ID，然后在该 ID 上应用 CSS，而不是在通用<li>元素上应用它。

JSFIDDLE 演示

于 2015-12-21T20:01:25.623 回答