使用空格和預標籤進行文本對齊

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>或的有效子女0是<li>元素;在<pre>元素應該是內的<li>元素：

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

而對於設置爲white-space: pre-wrap（或類似）的<pre>元素的CSS，這是該元素的通常默認樣式，但它可能是默認值在您的瀏覽器中被覆蓋或設置不同。

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/