IE和空格

Question

我有PHP從數組中創建一個內聯無序列表。對於這些列表項中的每一個，我需要指定「white-space：nowrap」，因爲我在文本旁邊有複選框，並且它們不應該分開。但是，該列表應該正常打包，因爲它不應用於列表項之外。

<ul> 
    <?php 
    foreach ($nonfiction as $nonficid => $nonficgenre) { 
     echo "<li><input type=\"checkbox\" name=\"genre[]\" value=\"$nonficgenre\""; 
     if (in_array($nonficgenre, $selectedgenres)) { 
      echo " checked=\"checked\""; 
     } 
     echo " /><span class=\"genrelabel\">$nonficgenre</span></li> "; 
    } 
    ?> 
</ul> 

在我的CSS（注意：整個列表是在課堂上「listdivs」的一個div）：

.listdivs li { 
    display: inline; 
    white-space: nowrap; 
} 

這工作正常，在Chrome和Firefox，這在周圍包裹清單適當的休息。但IE忽略了合法的空格，並將整個列表打印在一行上。我怎樣才能彌補這一點？

Answer 1

嘗試添加跨度內容。

.listdivs li { 
    display: inline; 
    white-space: nowrap; 
} 
.listdivs li span { 
    white-space: nowrap; 
} 

<ul> 
    <?php 
    foreach ($nonfiction as $nonficid => $nonficgenre) { 
     echo "<li><span><input type=\"checkbox\" name=\"genre[]\" value=\"$nonficgenre\""; 
     if (in_array($nonficgenre, $selectedgenres)) { 
      echo " checked=\"checked\""; 
     } 
     echo " /><span class=\"genrelabel\">$nonficgenre</span></span></li> "; 
    } 
    ?> 
</ul> 

這招被很多用在一些用戶界面，像jQueryUI的，yahooui，ExtJS的