Html 水平无序列表_Html_Css - Fatal编程技术网

Html 水平无序列表

html css

Html 水平无序列表,html,css,Html,Css,我可以用一个表在5秒钟内完成这项工作，但我试图通过使用CSS来避免它，在FF中看起来不错，但问题是它在IE中不起作用（第二个li出现在第一个li下面）宽度：120px；显示：表格单元格；填充：1px；“> 宽度：30px；显示：表格单元格；填充：1px；“> 不要使用表格单元格。做： <li style="width:120px; display:inline; float:left;">Boo!</li> Boo 当然，您应该将CSS设置为外部，但我认为这只是

我可以用一个表在5秒钟内完成这项工作，但我试图通过使用CSS来避免它，在FF中看起来不错，但问题是它在IE中不起作用（第二个li出现在第一个li下面）


宽度：120px；显示：表格单元格；填充：1px；“>
宽度：30px；显示：表格单元格；填充：1px；“>

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

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

Boo

当然，您应该将CSS设置为外部，但我认为这只是为了简化问题。

如果您使用的是IE7或IE8，请确保您的DOCTYPE存在，以便它不会以“怪癖”模式呈现

在IE8中，使用HTML4 Strict或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>



asdf
宽度：30px；显示：表格单元格；填充：1px；“>

HTML5:

是显示：内联，这是你的朋友。哪一个是风格的关键，

display:inline

还是

float:left

？我发现它们都是用铬合金制作的。

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