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的