javascript - 向列表元素 HTML 添加空格

Question

尝试在列表字符串中添加多个空格，例如:

<li>Going (25 -going.length spaces added)        to New York</li>
<li>Departing (25 - departing.length spaces added)    to Boston</li>

这些 HTML 行是用 JavaScript 准备的，然后用 jQuery 显示。

但是当它们最终被渲染时，空白被消除了。检查列表元素显示空白确实在 HTML 代码中，但没有显示。

有什么想法吗？

PS:我刚刚注意到当我在这篇文章上面的列表项中有一堆空格时，这些空格从这篇文章中删除了!

Answer 1

你至少有两种方法来做你想做的事:

第一种方式:我不喜欢

使用  多次这样

<li>Going&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to New York</li>

第二种方式:比第一种方式更好

包围你的li带有 <pre></pre> 的元素像这样:

<li><pre>Going        to New York</pre></li>
<li><pre>Departing        to Boston</pre></li>

HERE IS THE 2nd way EXAMPLE

当然，正如其他 friend 所建议的那样，您还有许多其他使用 css 的方法，在我的回答中，您会找到 HTML 解决方案。

第三种方式: 使用 css:

HTML:

<li class="cssLI"><span class="type">Going to</span><span class="city">New York</span></li>
<li class="cssLI"><span class="type">Departing to</span><span class="city">Boston</span></li>

CSS:

.cssLI{
    width: 100%;
}
.city{
    float: right;
}

HERE IS THE 3rd way EXAMPLE