使用jQuery和javascript附加元素时的奇数格式

我不明白为什么我的

中的

以这种特殊的方式显示。firefox和chrome都出现了这种情况。不知何故，它们没有正确对齐。当我使用jQuery和JavaScript创建元素时，就会发生这种情况

var limit = 10000, wrapper = document.getElementById("vanilla_wrapper"), el;

for (var i = 0; i <= limit; i++){

    jq_wrapper.append("<li></li>");

}

for (var i = 0; i <= limit; i++){

    el = document.createElement("li");
    wrapper.appendChild(el);

}

var limit=10000，wrapper=document.getElementById（“香草包装”），el；
对于（var i=0；i，这是因为
ol
元素自动应用了
左填充
，为编号创建了空间

如果您的编号文本超过此值，则会出现该问题

你可以增加它

ol{
   padding-left: 60px;
}

我想你需要这个

ol {margin: 0; list-style-position: inside; padding: 0;}

尝试使用此选项。添加边距，然后确保其与顶部垂直对齐：

.jq { vertical-align: top }

ol li{
margin-left:20px;
}

每个浏览器都指定列表标记的格式，因此您必须使用特定于浏览器的属性来完成此操作。我现在正在研究其他浏览器，但同时，这是我为Chrome（webkit）找到的：

-webkit padding start
的默认值是40px，这是使数字超过1000的原因。虽然其他人建议增加
padding
值，但这会使数字缩进到1000以下，使其看起来很奇怪。使用
-padding start
属性将有助于使数字保持一致。Stay已调整以了解其他浏览器的更多信息

在chrome中工作的jsbin（我将您的
限制减少到1500，只是为了减少jsbin的延迟）：

编辑：

以下是Firefox的属性：
-moz padding start

和Opera:
-o-padding-start

IE似乎没有（如图所示…）但是这个链接可能会提供一些关于如何解决这个问题的见解：
尝试将
列表样式位置：inside；
添加到你的
ol
样式中。你能在JSFIDLE中复制吗？我在那里运行了你的代码，看起来格式不错。我已经调整了填充，格式仍然很奇怪。你能看看编辑和附加的屏幕吗快照和提琴？谢谢！我已经调整了填充，但格式仍然很奇怪。我做了编辑并附加了一个屏幕截图。你能看一下吗。谢谢。@thomas，如果你说的是顶部空间和红色列的项目较少，那么这是为了保护JSBIN。它切断了它认为可能挂起的长循环…在顶部添加
//noprotect
）
td {
  padding: 0px; /*Or just remove it...*/
}
ol {
  list-style-position: inside;
  -webkit-padding-start: 0px;
}