水平无序列表

Question

水平无序列表

5

我可以用表格在5秒内解决这个问题，但是我想通过使用CSS来避免它，在Firefox中看起来很好，但问题是在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>

- jim smith

2个回答

3

如果您正在使用IE7或IE8，请确保存在DOCTYPE，以避免在怪异模式下呈现。

在IE8中，使用HTML4严格或HTML5 DOCTYPE对我很有用。

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

- foson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tom Gullen · Accepted Answer

不要使用表格单元格，而是应该：

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

当然，你应该把CSS放在外部文件，但我会假设这只是为了简化问题。