开发者

horizontal unordered list

I can do this in 5 seconds with a ta开发者_如何转开发ble but I'm trying to avoid it by using CSS, looks fine in FF but problem is it doesn't work in IE (the second li appears underneath the first 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>


Don't use table cell. Do:

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

Of course you should have your CSS external but I'll assume it's just to simplify the question.


If you're using IE7 or IE8, make sure your DOCTYPE is present so that its not rendering in quirks mode.

Using the HTML4 Strict or HTML5 DOCTYPES worked for me in 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>

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜