< li>在同一行上- Bootstrap

xam8gpfp 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(2)|浏览(167)

我有这个代码：

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/14697686/li-on-the-same-line-bootstrap

2条答案

按热度按时间

wkftcu5l1#

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

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

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

赞(0）回复(0）举报 2022-12-16

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。
任何一种方法都应该有效。

赞(0）回复(0）举报 2022-12-16

我来回答

< li>在同一行上- Bootstrap

2条答案

相关问题

热门标签

最新问答