当我用javascript创建ul标记时,css不起作用

当我用javascript创建ul标记时,css不起作用,javascript,css,Javascript,Css,代码在哪里 当我创建ul元素时,为它们设置的css不起作用。。。 还有其他方法设置css吗 这是创建元素时不起作用的css: ul li{ list-style-type: none; float: left; width: 13%; text-align: center; margin-left: 7px; height: 20px; line-height: 20px; } 它似乎可以与其他标记一起使用,问题只存在于ul….尝试使用

代码在哪里

当我创建ul元素时,为它们设置的css不起作用。。。 还有其他方法设置css吗

这是创建元素时不起作用的css:

ul li{
    list-style-type: none;
    float: left;
    width: 13%;
    text-align: center;
    margin-left: 7px;
    height: 20px;
    line-height: 20px;
}

它似乎可以与其他标记一起使用,问题只存在于ul….

尝试使用
document.createElement()
创建HTML元素。您的代码没有有效地将适当的元素附加到适当的父级中,并且您创建HTML的方式使调试变得有点困难。以下是更新的JSFIDLE:

函数drawDays(){
//获取包含的元素
var x=document.getElementById(“innerElement”);
//创建列表元素并将其附加到容器中
var ul=document.createElement('ul');
x、 儿童(ul);
对于(变量i=0;i<7;i++){
//创建一个元素,向其中添加一些文本内容,然后将其附加到列表元素
var li=document.createElement('li');
li.innerText=‘测试’;
ul.儿童(li);
}
}
提取天数();

问题:


添加到innerHMTL时,浏览器会将其作为一个完整的元素。因此,这意味着所有的
li
元素不会添加到
ul
之后,而是添加到
ul之后。这就是CSS选择器不匹配的原因。在其中一个图元上单击鼠标右键并选择“检查图元”时,可以看到这一点。您将看到
li
元素及其同级元素的html,前面是一个空的
您的
li
标记根本不在
ul
内,因此您的选择器不匹配。 我用一个可能的解决方案更新了你的小提琴:

函数drawDays(){
var x=document.getElementById(“innerElement”);
var html=“”;
html+=“
    ” 对于(变量i=0;i<7;i++){ html++=“
  • ”+“nononono”+“
  • ”; } html+=“
”; x、 innerHTML=html; } 提取天数();
你能发送你的JS代码吗?看看你的标记,你就会明白为什么它不起作用了。人们什么时候会知道只有在别处发布代码才会导致否决票和提前结束?@HoboSapiens我们鼓励他们首先了解自己一点提示,
div
中的
asdf
会破坏你的标记是的,你应该,那是个错误。固定的。
function drawDays() {
    //get the containing element
    var x = document.getElementById("innerElement");
    //create and append the list element to the container
    var ul = document.createElement('ul');
    x.appendChild(ul);

    for (var i = 0; i < 7; i++) {
        // create an element, add some text content to it, then append it to the list element
        var li = document.createElement('li');
        li.innerText = 'testing testing';
        ul.appendChild(li);
    }
}

drawDays();
function drawDays() {
    var x = document.getElementById("innerElement");
    var items = "";
    for (var i = 0; i < 7; i++) {
        items += "<li>" + "nonononono" + "</li>";
    }
    x.innerHTML = "<ul>" + items + "</ul>";
}

drawDays();
function drawDays() {
    var x = document.getElementById("innerElement");
    var html = "";
    html += "<ul>"
    for (var i = 0; i < 7; i++) {
       html += "<li>" + "nonononono" + "</li>";
    }
    html += "</ul>";
    x.innerHTML = html;
}

drawDays();