我有这个代码:
<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上的正确方法
--编辑--
我有几个问题要在这里添加评论,所以我就在这里编辑。
您提出的解决方案奏效了!谢谢!
2条答案
按热度按时间wkftcu5l1#
要在一行中显示列表,css需要有
display: inline
属性。该属性必须应用于li
元素。这个CSS可以很好的工作。注意填充。
在编码时,请给予你的
<ul>
元素一个ID,然后在那个ID上应用CSS,而不是在通用的<li>
元素上应用。JSFIDDLE DEMO
zzzyeukh2#
如果你正在使用Bootstrap 4,你可以使用Flexbox工具来更干净的替代内联样式。我也遇到过类似的问题,在
<li>
中让字形图标和文本保持在同一行。下面是我解决这个问题的方法。在这里我使用字形从字体真棒。
下面是一个JSFiddle,它使用无序列表中的
.list-inline
和.list-inline-item
类。这是另一个JSFiddle,它也在Bootstrap 4中工作并使用内联Flexbox。
任何一种方法都应该有效。