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

当然，正如其他朋友建议的那样，你还有很多其他的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

Answer 2

HTML中忽略多个空格，屏幕上只打印单个空格。您可以改为使用 。

因此，您可以使用此代码显示1个空格。你的代码是：

<li>Going (25 -going.length spaces added)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to New York</li>

这将按您希望的那样呈现。

Answer 3

添加不好或者添加空格而不是添加标记，如

<ul class="list">
     <li>
            <span>Going </span>
            <span>(25 -going.length spaces added)</span>        
            <span>to New York </span>
        </li>
</ul>

在css中你可以写成

ul.list li span {display-inline：block; min-width：70px} / *根据您的需要，您可以将课程分配给li * /

希望它有所帮助！

Answer 4

Afzaal是对的。它看起来像这样：

<li>Going (25 -going.length spaces added)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to New York</li>

虽然您也可以这样设置（这是一种更好的做法）：

 <li>Going (25 -going.length spaces added)<span style="margin-left:40px;">to New York</span></li>

Answer 5

你可以使用一些 ，但这不是一个好方法。也许你可以使用一张桌子。或者，更好的是，对齐某些span或某些div，并使用CSS显示它们。

向列表元素HTML添加空格

5 个答案: