Mantener bullet en listas inline-block

Rafael · #1 (**permalink**) 13/04/2015, 13:56

¿Cómo puedo mantener los bullets cuando tengo una lista con los elementos LI con display inline-block?

Código HTML:

Ver originalli {display: inline-block;}
 
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>

Para tener esto:

- Elemento 1 - Elemento 2

He estado poniendo spans con un bullet y también imágenes, pero siento que es un parche.

mardojai · #2 (**permalink**) 13/04/2015, 14:07

Solo se me ocurre con :before

PHPeros · #3 (**permalink**) 13/04/2015, 14:07

¿Por qué no los flotas y les das un margen?

Código HTML:

Ver original<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
</ul>

Código CSS:

Ver originalli {
    float: left;
    margin-left: 30px;
}

superweb360 · #4 (**permalink**) 13/04/2015, 16:34

Solución 1

Código HTML:

Ver original<!DOCTYPE html>
<html>
  <head>
  <style>
 li {display: inline-block;}
 li:before {
 content:'>';
 margin-right:5px;
}
  </style>
  </head>
  <body>
    <ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento 4</li>
    </ul>
</body>
</html>

Solución 2

Código HTML:

Ver original<!DOCTYPE html>
<html>
  <head>
  <style>
 li {display: inline-block;}
  </style>
  </head>
  <body>
    <ul>
    <li>&bull;&nbsp;Elemento 1</li>
    <li>&bull;&nbsp;Elemento 2</li>
    <li>&bull;&nbsp;Elemento 3</li>
    <li>&bull;&nbsp;Elemento 4</li>
    </ul>
</body>
</html>

pzin · #5 (**permalink**) 13/04/2015, 23:31

Todo lo que hagas será un parche, porque con inline-block las elementos de lista dejan de ser elementos de lista.

Tal vez lo suyo sea flotarlos. ¿Por qué usas inline-block? Si es por usar una alinea de texto para centrarlos al flotarlos también se pueden centrar.

Rafael · #6 (**permalink**) 20/04/2015, 13:20

Voy a revisar las opciones. Necesito experimentar con el before, pero probablemente los tendré que flotar.