< li>在同一行上- Bootstrap

xam8gpfp  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(2)|浏览(157)

我有这个代码:

<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上的正确方法
--编辑--
我有几个问题要在这里添加评论,所以我就在这里编辑。
您提出的解决方案奏效了!谢谢!

wkftcu5l

wkftcu5l1#

要在一行中显示列表,css需要有display: inline属性。该属性必须应用于li元素。
这个CSS可以很好的工作。注意填充。

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

在编码时,请给予你的<ul>元素一个ID,然后在那个ID上应用CSS,而不是在通用的<li>元素上应用。
JSFIDDLE DEMO

zzzyeukh

zzzyeukh2#

如果你正在使用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>

在这里我使用字形从字体真棒。
下面是一个JSFiddle,它使用无序列表中的.list-inline.list-inline-item类。
这是另一个JSFiddle,它也在Bootstrap 4中工作并使用内联Flexbox。
任何一种方法都应该有效。

相关问题