HTML/CSS空白打破

Question

我很奇怪，爲什麼有標記像

http://jsfiddle.net/rkEpx/

我得到

正如你可以看到，第一個和最後一個菜單項有它的鏈接打破分成三行，即使有足夠的空間來擴展。除非真的沒有空間，否則是否有可能斷線？如果可能的話，沒有設置固定寬度或使用不間斷空間？

Answer 1

  HTML實體或white-space: nowrap; CSS。 但即使沒有空間也不會破損。

您可以嘗試使用的display: inline-block;代替float: left;您li，img和/或p。

http://jsfiddle.net/2Mv2E/

Answer 2

嘗試增加：

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

Answer 3

我不知道爲什麼它的行爲就像是，但似乎你可以通過浮動修復它的p的還有：

p { 
    float: left; 
} 

根據您的瀏覽器要求，您還可以選擇僅在圖像後面浮動p：

img + p { 
    float: left; 
}