Twitter-bootstrap –
  • on the same line – Bootstrap

    • html-liststwitter-bootstrap

    I have this code:

     <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 -->

    Can't figure out how to make it as the li content stay on the same line, preferably with some padding between them.

    I'm making some tests with display:inline, but I can't figure the right way to put it on CSS

    — EDIT —

    I'm having a few issues to add a comment here, so I'll just edit here.

    The solution you presented worked! Thank you!

    Best Answer

    To display a list on one line, the css needs to have display: inline property. This property must be applied on the li element.

    This CSS will work fine. Notice the padding too.

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

    While coding, please give your <ul> element an ID and then apply the CSS on that ID instead of applying it on generic <li> element.

    JSFIDDLE DEMO

    Related Topic