HTML/CSS espacios en blanco romper

Question

Me pregunto por qué con marcado como

http://jsfiddle.net/rkEpx/

consigo

Como se puede ver, el 1er y último elementos de menú tiene su enlace roto en 3 líneas incluso si hay suficiente espacio para expandirse. ¿Es posible que la línea no se rompa a menos que realmente no haya espacio? Si es posible sin establecer un ancho fijo o utilizar espacios sin interrupción?

Answer 1

  entidad HTML o white-space: nowrap; CSS. Pero no se romperá incluso si realmente no hay espacio.

Puedes probar a utilizar en lugar de display: inline-block;float: left; para su li, img y/o p.

http://jsfiddle.net/2Mv2E/

Answer 2

Trate de añadir:

li { 
    padding: 0; 
    margin: 0 3px 0 0; 
    float: left; 
    max-width: 120px; 
white-space: nowrap; 
} 

Answer 3

no tengo idea de por qué se comporta de esa manera, pero parece que lo puede solucionar por la flotación de la p 's así:

p { 
    float: left; 
} 

Dependiendo de los requisitos de su navegador, también puede elegir simplemente flotar el p justo después de la imagen:

img + p { 
    float: left; 
}