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

Add a space between ul and li element created by JavaScript

本文关键字：添加 空格 一个 之间 元素 创建 JavaScript ul li 在由      更新时间：2023-09-26

现在一直在与一个问题作斗争。

我有一个列表，它的行为很奇怪，直到我把它弹出并看到整个文件打印成一行，我才发现问题。

像这样的东西。

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

元素之间没有空格。

现在我不知道这可能是个问题，所以我开始修复firebug中的元素。

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

注意，如果我的</li>下有</ul>元素，那么脚本实际上可以按预期工作

有没有一种方法可以用javascript构建文件？我有一个jsFiddle，在那里你可以看到用HTML创建的树和用JavaScript创建的树之间的区别。http://jsfiddle.net/Xk49c/

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

您的<ul>元素在小提琴中显示为inline-block。我怀疑他们正遭受inline-block这种鲜为人知的特性的折磨。

问题是，当您使用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
相关文章：