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