Question

下面是我的代码和样式由于某种原因没有应用。可能是我做错了。一世刚刚动态添加了li。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style >
    #menu ul{
        background: red;          
    }
    #menu ul li{
        float: left;
        list-style-type: none;
    }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
    $(function() {
        var arr = new Array("file", "edit");
        for (var i = 0; i < arr.length; i++) {
            localStorage.setItem(i, arr[i]);
        }

        for (var i = 0; i < arr.length; i++) {
            $("#menu").append("<li>" + localStorage.getItem(i) + "</li>");
        }

    });
</script>
</head>
<body>

<ul id="menu" class="menu"></ul>


</body>
</html>

让我明确表示我不想动态添加css。因为我期待很多css

Answer 1

#menu是UL

#menu li{
    float: left;
    list-style-type: none;
}

#menu ul li匹配#menu UL等内的UL

Answer 2

菜单是ul元素

#menu {
    background: red;
}
#menu li {
    float: left;
    list-style-type: none;
}

演示：Fiddle

Answer 3

ul有id="menu"你应该声明这样的样式。

  ul#menu li{
            float: left;
            list-style-type: none;
        }

Answer 4

#menu是ul的ID，因此定位他们的li

试试这个

 #menu li{
        float: left;
        list-style-type: none;
    }

Answer 5

更新了小提琴：http://jsfiddle.net/2EcWH/3/

 ul {
     background: red;
    float: left;
 }
 #menu.li {
     list-style-type: none;
 }

无法将样式应用于动态添加的元素

5 个答案: