使用jQuery和javascript追加元素时的奇怪格式

Question

我不明白为什么我<li>中的<ol>以这种奇特的方式展示。它发生在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);

}

修改 JSBIN

修改2

按建议调整填充仍然有非常奇怪的格式：

JSBIN

Answer 1

这是因为ol元素自动应用了left-padding，为编号创建了空间。

它有一个default value of 40px所以如果您的编号文本超出此范围，就会出现问题..

您可以使用

增加它

ol{
   padding-left: 60px;
}

Answer 2

我认为你需要这个

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

Answer 3

尝试使用此功能。添加边距，然后确保它垂直对齐顶部：

.jq { vertical-align: top }

ol li{
margin-left:20px;
}

Answer 4

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

td {
  padding: 0px; /*Or just remove it...*/
}
ol {
  list-style-position: inside;
  -webkit-padding-start: 0px;
}

-webkit-padding-start的默认值是40px，这是将你的数字甩掉1000以上的数字。虽然其他人建议增加padding值，但这会将你的数字缩小到1000以下，并使它们成为看起来很奇怪使用-padding-start属性有助于保持数字一致。请继续关注其他浏览器的更多信息。

jsbin在chrome中运行（我将limit降低到1500只是为了减少jsbin的延迟）：http://jsbin.com/uLabiHiY/18

修改：

这是Firefox的属性：-moz-padding-start

和Opera：-o-padding-start

IE似乎没有一个（去图......）但是这个链接可能会提供一些有关如何修复它的信息：-webkit-padding-start: 40px; What it should be for IE and Firefox?