水平无序列表

jim*_*ith 5 html css

我可以用一张桌子在5秒钟内完成这个但是我试图通过使用CSS来避免它,在FF中看起来很好但问题是它在IE中不起作用(第二个li出现在第一个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>
Run Code Online (Sandbox Code Playgroud)

Tom*_*len 10

不要使用表格单元格.做:

<li style="width:120px; display:inline; float:left;">Boo!</li>
Run Code Online (Sandbox Code Playgroud)

当然你应该把你的CSS外部,但我认为它只是为了简化问题.


fos*_*son 3

如果您使用的是 IE7 或 IE8,请确保您的 DOCTYPE 存在,以便它不会以怪异模式呈现。

在 IE8 中使用 HTML4 Strict 或 HTML5 DOCTYPES 对我有用

<!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>
Run Code Online (Sandbox Code Playgroud)

HTML5:<!DOCTYPE html>