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>

这个技巧在一些ui中很常用，比如jquery ui，yahoo，extjs

IE和白色空间

1 个答案: