2

现在一直在为一个问题苦苦挣扎。

我有一个行为很奇怪的列表，直到我对它进行 firebugd 并看到整个文件打印在一行中才找到问题。

像这样的东西。

<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 。

4

2 回答 2

4

您的<ul>元素显示inline-block在您的小提琴中。我inline-block怀疑他们正在遭受.

于 2013-02-07T18:46:58.430 回答
1

问题是，当您使用 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
于 2013-02-07T18:53:47.310 回答