CSS ID不在div中工作

Question

我一直在尝试在html中学习水平列表。我有以下代码，

CSS：

#list li
{
    text-decoration:none; 
    display: inline;
    list-style-type: none;
    padding-right: 20px;    
}
</style>

HTML：

<div >
<ul id="list">
    <li>Store </li> 
    <li>Mac </li>
    <li>IPod </li>
    <li>IPhone </li>
    <li>IPad </li>
    <li>ITunes </li>
    <li>Support </li>
</ul>
</div>

当我将id放在div标签（<div id="list">）中时，它不会水平显示列表，而当前代码会水平显示列表。我不明白其背后的原因。请帮我清除这个概念。感谢

Answer 1

因为div不是列表元素。它没有列表样式类型，因此它不会更改div中任何列表上的项目符号。并且“内联”显示类型不会从父节点向下传播到DOM树，因此内联仅适用于div本身，不会影响列表或li元素。

Answer 2

根据这个jsFiddle，它有效。

Answer 3

如果你把ID放在div元素上，它也可以正常工作。

看看这个小提琴：http://jsfiddle.net/sKaYm/

您的CSS选择器#list li说“将此应用于任何具有ID'列表'元素的子元素列表元素 - 无论它是否是直接孩子。” - 所以基本上无论你在列表中包含多少级别的div或其他元素，它仍会选择它。

Answer 4

list-style-type仅更改项目前面的标记。 创建跨浏览器水平列表向左列表项添加float：

#list li
{
    text-decoration:none; 
    display: inline;
    list-style-type: none;
    padding-right: 20px;   
    float:left;
}