alineando elementos li en la misma línea

Estoy tratando de tener li artículos en la misma línea. Me las arreglé para conseguir eso, pero por alguna razón cada elemento li se rompe en 2 líneas. No estoy seguro por qué. ¿Hay alguna manera de solucionarlo?

HTML:

    TEXT TEXT 
 TEXT TEXT TEXT TEXT TEXT
 TEXT TEXT TEXT TEXT TEXT

JSfiddle (con CSS): http://jsfiddle.net/bgeswkr4/

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.

enter image description here

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;

enter image description here

Si elimina eso, entonces se renderiza correctamente.

enter image description here

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