Javascript 如何显示宽度为100%的Chrome表格

我正在调试和扩展一个express应用程序，该应用程序在页面上的一系列嵌套表中显示数据集。最初，所有CSS都是HTML文件头标签中的样式标签，表格在页面宽度的100%上显示良好。当CSS在同一个页面上时，它工作了，这是用于控制我们试图显示的元素宽度的CSS：

li.dir span {
    color: black;
    cursor: auto;
    -webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
    box-sizing: border-box ;
    width: 100%;
}

现在我已经去掉了样式标签并将CSS移到了它自己的文件中，宽度：100%样式就不会显示了

我已经检查了DevTools中有问题的元素，当我查看li.dir span类时，Chrome和IE都消除了width:100%属性

我知道宽度是由父元素控制的，所以我尝试将style=width:100%属性添加到每个父元素中，以尝试强制这个特定的样式属性，但我似乎仍然找不到使这个特定CSS属性工作的地方

以下是父div，它控制在我的正文中创建表的位置：

<div id="url"></div>
<div class="create"></div>

我发现的问题与应用程序动态插入DOM元素有关。不知何故，Chrome正在将style=“display:inline block”属性添加到作为表数据父项的锚定标记中。问题是，我找不到添加该属性的位置，因为当我将HTML文件中唯一具有该属性的位置更改为“宽度：100%”时，它仍然会出现

我猜测显示：内联块是从引导继承的，但这只是猜测

这是我处理父元素插入的代码。如您所见，我正试图消除display:inline块以获得100%的宽度。我的代码中没有display:inline块，但它在默认情况下以某种方式被添加。如何消除它？请看一下我的代码：

table += 
'<ul>' + 
    '<li class="dir" id="' + title + '">' + 

         // This is the anchor tag in question
        '<a id="' + title + 'focus" style="width: 100%;"></a>' + 
        title + 
        '<span>' + 
            '<ul>' + 
                '<li id=\"' + title + "Table" + '\"></li>' + 
            '</ul>' + 
        '</span>' + 
    '</li>' + 
'</ul>';
}
tabobj.push(title);

table+=
“
”+
“
”+
//这是有问题的锚标签
"

当它在同一个HTML文件的样式标记中，而不是在单独的CSS文件中时，为什么它会在我的类中工作

另外，我如何摆脱Chrome和IE默认添加的显示：内联块设置

请让我知道你是否能在这一点上帮助我，谢谢

这里有一个指向codePen上项目的链接：
因此我找到了它，并开始尝试不同的解决方案，我能够解决它

感谢您帮助我确定方向。以下锚定标记显示了我为解决此问题而更改为HTML的内容：

'<a id="' + title + 'focus" style="width: 100%; display: none; overflow: auto;"></a>'

“”
您是否尝试过硬清除缓存？因为只有
颜色
和
光标
通过，我猜您的CSS格式不正确，导致其余规则被丢弃。如果不看到您的代码，我们将帮不上忙。Kevin，是的，容器和ul都设置为100%。在DevTools中，当我消除显示时：inline block属性，我得到了我想要的。问题是，因为它是由Chrome默认添加的，我不知道如何消除它，因为它不在我的代码中。
span
是一个内联元素，将忽略您在其上设置的任何宽度。您需要将
span
设置为块级元素，以便应用该宽度。Chrome没有注入内联样式通过
style
属性，其他的东西可能是.JS，它来自于您使用.vs构建的小部件/lib。