IE和空白

Question

I have PHP creating an inline unordered list from an array. For each of these list items, I need to specify "white-space: nowrap" because I have checkboxes next to text, and they should not be separated. However, the list should otherwise be wrapping normally, because it shouldn't apply outside the list items.

<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>

And in my CSS (note: the whole list is in a div of class "listdivs"):

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

This works fine in Chrome and Firefox, which wraps the list around at the appropriate break. But IE ignores the legitimate white spaces and prints the whole list out on one line. How can I compensate for this?

Answer 1

try to add an span arround content.

.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>

This trick is used alot in some ui, like jqueryui, yahooui, extjs