horizontale ungeordnete Liste

Ich kann das in 5 Sekunden mit einer Tabelle, aber ich versuche es zu vermeiden durch die Verwendung von CSS, sieht gut aus in FF, aber problem ist, es funktioniert nicht im IE (der zweite li erscheint unterhalb des ersten li) 

<ul style="list-style-type:none; margin:0px; padding:0px">
   <li style="width:120px; display:table-cell; padding: 1px;"><?=$m['make']?></li>
   <li style="width:30px; display:table-cell;  padding: 1px;"><input id="changemanufacturer" type="checkbox"></li>
</ul>

InformationsquelleAutor jim smith | 2011-03-16

  1. 3

    Wenn Sie IE7 oder IE8, stellen Sie sicher, dass Ihre DOCTYPE vorhanden ist, so dass seine nicht-Darstellung im quirks-Modus.

    Verwendung der HTML-4-Strict oder HTML5-DOCTYPES hat bei mir im IE8

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
    <ul style="list-style-type:none; margin:0px; padding:0px"> 
        <li style="width:120px; display:table-cell; padding:1px;">asdf</li> 
        <li style="width:30px; display:table-cell; padding: 1px;">
        <input id="changemanufacturer"  type="checkbox">
        </li>
    </ul> 
</body>
</html>

    HTML5: <!DOCTYPE html>

    InformationsquelleAutor foson

  2. 10

    Nicht verwenden table-cell. Tun:

    <li style="width:120px; display:inline; float:left;">Boo!</li>

    Natürlich sollten Sie Ihre externe CSS-aber ich nehme an es ist nur zur Vereinfachung der Frage.

    Es ist das display:inline-das ist Ihr Freund.

    InformationsquelleAutor Tom Gullen

Schreibe einen Kommentar