Question

现在一直在努力解决问题。

我有一个行为非常奇怪的列表，直到我发现它并且看到整个文件打印出来之后才能找到问题。

像这样的东西。

<div class="clock-content-wrapper"><ul class="clock-digit-wrapper hour"><li class="clock-digit-one"></li><li class="clock-digit-three"></li></ul><ul class="clock-digit-wrapper minute"><li class="clock-digit-three"></li><li class="clock-digit-seven"></li></ul><ul class="clock-digit-wrapper second"><li class="clock-digit-zero"></li><li class="clock-digit-zero"></li></ul></div>

元素之间没有空格。

现在我不知道这可能是一个问题，所以我开始像这样修复萤火虫中的元素。

<div class="clock-content-wrapper">
<ul class="clock-digit-wrapper hour">
<li class="clock-digit-one"></li>
<li class="clock-digit-three"></li>
</ul>
<ul class="clock-digit-wrapper minute">
<li class="clock-digit-three"></li>
<li class="clock-digit-seven"></li>
</ul>
<ul class="clock-digit-wrapper second">
<li class="clock-digit-zero"></li>
<li class="clock-digit-zero"></li>
</ul>
</div>

请注意，如果我的</ul>下面有</li>元素，那么该脚本实际上就可以正常工作。

有没有办法用javascript构建文件？我有一个jsFiddle，您可以在其中查看HTML中创建的树与使用JavaScript的树之间的差异。 http://jsfiddle.net/Xk49c/

我真的不想改变css中的任何内容。因为html和js应用程序都使用相同的css。

Answer 1

您的<ul>元素在您的小提琴中显示为inline-block。我怀疑他们患有this little-known feature of inline-block。

Answer 2

问题是，当您使用HTML创建元素时，您可以使用一个或多个空格或甚至换行来缩进或分隔元素。 HTML将这些空间渲染为一个单独的空间，因此您可以看到这些元素之间的空间。

要在JavaScript创建的元素之间添加空格，您必须向minute和second类添加填充，或在每个UL之间插入文本节点

hours = createElementWithClass('ul', 'clock-digit-wrapper hour');
clock_toolbar_wrapper_close.appendChild(hours);
clock_toolbar_wrapper_close.appendChild(document.createTextNode(' ')); // Add this


minutes = createElementWithClass('ul', 'clock-digit-wrapper minute');
clock_toolbar_wrapper_close.appendChild(minutes);
clock_toolbar_wrapper_close.appendChild(document.createTextNode(' ')); // And this

在JavaScript创建的ul和li元素之间添加一个空格

2 个答案: