动态设置（在超时内）时如何使列表项尊重ul padding-right

Question

我面临的问题是，当尝试设置元素的padding-right属性时，在setTimeout中运行的代码中，其中的 li 元素未正确调整大小。 当我不在setTimeout内时，问题不会发生（或者至少很少发生）。

有人可以确认这是 webkit错误或以其他方式指向解决方案吗？

我能够在Chrome和Safari中重现它。

我创建了3个场景（请使用Chrome和Safari进行测试）：

1. 在静态CSS中带有填充权限的ul - 显然有效http://jsbin.com/ufifos/5/edit
2. 在js代码中没有设置padding-right的ul不在setTimeout内部 - 工作（大部分时间）请参阅jsbin.com/ekazow/1/edit
3. 带有padding-right的ul在setTimeout内的js代码中设置 - not WORKing proper http://jsbin.com/uzorux/1/edit

设置了填充权限，但 li 元素未正确重新绘制。浏览器调整大小（或一些调整大小）修复它。

基本上代码是

setTimeout(function(){

    document.getElementById('container').style.paddingRight = '20px';

}, 2000);

Answer 1

问题在于这条规则：

li {
   width: 100%;
}

它不是第一个“工作”测试。删除它，它应该工作正常。您可能还需要在li上设置display: block。