alineando elementos li en la misma línea

Elimine los flotantes y cambie los atributos de inline-block a li elementos. Me gusta esto:

 .wrapper { text-align: center; } .price_carousel .list { padding-left: 1em; display:block; margin: 0; } .price_carousel .list li { display: inline-block; vertical-align: middle; list-style-position: inside; list-style-type: disc; margin-right: 1em; text-align: left; white-space: nowrap; } 

He agregado un white-space: nowrap; declarar a los elementos que nunca se rompen en el interior, pero puedes derribarlo (generalmente lo derribo, pero depende de ti).

Pero si quiere que el UL nunca se rompa (para que el LI siempre esté en la misma línea), solo agregue este white-space: nowrap; statement a la UL

Ver violín aquí

EDITAR PARA INCLUIR BULLETAS: inline-block elementos de inline-block no muestran el list-style-type , por lo que las opciones para incluir viñetas en su caso son las siguientes:

a) usar float: izquierda;

 .price_carousel .list li { float:left; vertical-align: middle; list-style-position: outside; list-style-type: disc; margin-right: 1em; text-align: left; white-space: nowrap; } 

b) usar una imagen de fondo como viñeta

 .price_carousel .list li { display:inline-block; vertical-align: middle; list-style-position: outside; list-style-type: disc; margin-right: 1em; text-align: left; white-space: nowrap; padding-left:30px; background:url('http://upload.wikimedia.org/wikipedia/commons/e/ef/Bullet_go.png') no-repeat center left; } 

c) incluir un lapso en su marcado HTML

HTML es así:

  
 
TEXT TEXT 
 
TEXT TEXT 
 
TEXT TEXT 
  

y CSS así:

 .price_carousel .list li { display:inline-block; vertical-align: middle; list-style-position: outside; list-style-type: disc; margin-right: 1em; text-align: left; white-space: nowrap; padding-left:30px; } .bull { display:list-item } 

En Chrome se procesa correctamente y todos se muestran en la misma línea si aumenta la ventana … debido a la longitud de la línea y al hecho de que ha agregado un margen a la izquierda, no hay espacio para que permanezcan. en la misma línea, a menos que la ventana sea lo suficientemente grande como para que lo haga.

Ahora veo que en Firefox se divide en dos líneas … y mi primera suposición es que está relacionado con este estilo que su adición:

 list-style-position: inside; 

Si elimina eso, entonces se renderiza correctamente.

Parece que Firefox puede tener algunos problemas con list-style-position. Aquí hay un problema que encontré en Bugzilla con un problema similar: https://bugzilla.mozilla.org/show_bug.cgi?id=36854