HTML/CSS Whitespace łamanie

Question

Zastanawiam się dlaczego ze znacznikami jak

http://jsfiddle.net/rkEpx/

uzyskać

Jak widać, pozycje 1 i ostatni menu zostały jego związek uszkodzony na 3 linie, nawet jeśli jest wystarczająco dużo miejsca, by się rozwinąć. Czy to możliwe, żeby linia nie pękła, chyba że naprawdę nie ma miejsca? Jeśli to możliwe bez ustawiania stałej szerokości lub używania spacji nierozdzielających?

Answer 1

  podmiot HTML lub white-space: nowrap; CSS. Ale nie pęknie, nawet jeśli naprawdę nie ma miejsca.

Można spróbować użyć display: inline-block; zamiast float: left; dla Twojego li, img i/lub p.

http://jsfiddle.net/2Mv2E/

Answer 2

spróbuj dodać:

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

Answer 3

Nie mam pojęcia, dlaczego zachowuje się tak, ale wydaje się, można go naprawić przez pływających p „s, a także:

p { 
    float: left; 
} 

zależności od wymagań przeglądarki, można również zdecydować się na tylko pływak p zaraz po obrazka:

img + p { 
    float: left; 
}