Question

如何对齐正确添加此文本？

我的代码：

 data[0]=hello 123
 data[1]=hellowq 345
 data[2]=heloowaaa 678
 for (var i = 0; i < data.length; i++) {
     obj += "<pre><li>" + data[i] + "</li></pre>";
 }

我的实际输入：

hello            123
hellowq          345
heloowaaa        678

output :
hello            123
hellowq            345
heloowaaa           678

我想得到这样的输出：

hello            123
hellowq          345
heloowaaa        678

Answer 1

您的HTML无效，<ul>或<ol>的仅有效子元素是<li>元素; <pre>元素应 <li>元素：

for (var j = 0; j < data.length; j++) {
    obj += "<li><pre>" + data[i] + "</pre></li>";
}

并且<pre>元素的CSS设置为white-space: pre-wrap（或类似），这是该元素的常用默认样式，但是默认值可能已被覆盖或设置为不同浏览器。

Answer 2

正如我在评论中声明的那样，您可能会为每个标签/值对添加相同数量的空格。解决方案可能在我们没有看到的代码中，你必须从生成的空格数中减去标签长度+值。

更好的方法是在html / css中进行布局。一个快速而又肮脏的例子。

HTML

<ul>
    <li>Domdido <span class="value">$8</span></li>
    <li>Domdido123 <span class="value">$8</span></li>
</ul>

CSS：

ul{list-style:none;padding-left:0;
    width:50%;
}
.value{float:right;}

http://jsfiddle.net/tqs2rvrd/

使用空格和预标签进行文本对齐

2 个答案: