Question

我可以在5秒钟内使用表格执行此操作，但我试图通过使用CSS来避免它，在FF中看起来很好但问题是它在IE中不起作用（第二个li出现在第一个li下面）< / p>

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

Answer 1

不要使用表格单元格。做：

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

当然你应该让你的CSS外部，但我认为这只是为了简化问题。

Answer 2

如果您使用的是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>

HTML5：<!DOCTYPE html>

水平无序列表

2 个答案: