对齐问题

问题描述:

我有以下的HTML对齐问题

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

    <html> 

................. 
.... 
....... 

<td colspan="4" ><br>&lt;40  : Negative<br>40-80 : positieve <br></td> 

它导致下面的HTML

40:Negative 
40-80:Positive 

我需要的是

40 :Negative 
40-80:Positive 

是有可能使用CSS来做到这一点?或者其他方式?

可以使用<pre>

<td colspan="4" > 
     <pre> 
&lt;40 : Negative 
40-80 : positieve 
     </pre> 
    </td> 

你可以用不间断空格字符替换你的空间, 

<td colspan="4" ><br>&lt;40&nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;: Negative<br>40-80nbsp;nbsp;nbsp;nbsp;: positieve <br></td> 
+0

谢谢,但这个内容来自动态来源。所以无法预测&nbsp ; :( – balalakshmi 2011-03-30 13:38:27

好吧,如果你不反对使用表(它看起来像你不是:)),那么只要坚持在一个表太:

<td> 
    <table> 
    <tbody> 
     <tr><td>&lt;40</td> <td>:Negative</td></tr> 
     <tr><td>40-80</td> <td>:Positive</td></tr> 
    </tbody> 
    </table> 
</td> 

您正在使用换行符(<br>),而不是一个新的<td>行。如果不查看布局的其余部分,则无法使用空格(&nbsp;)仅使用一行来排列这些空间,也无需将这些数据进一步拆分为2列。

将您的数字包括在范围内,并给它一些宽度。

为什么你有这个<br>标签?

这里是一个可能的解决方案(的jsfiddle:http://jsfiddle.net/rcravens/hwGrj/

<table> 
    <td> 
     <span class='item'> 
      <span class='num'>40</span> 
      <span class='posneg'>:Negative</span> 
     </span> 
     <span class='item'> 
      <span class='num'>40-80</span> 
      <span class='posneg'>:Positive</span> 
     </span> 
    </td> 
</table> 

span.item{ 
display: block; 
} 
span.num{ 
display: inline-block; 
width: 40px; 
} 

该解决方案与您的表使用的CSS布局。你需要将你的元素包装在几个跨度中。

希望这会有所帮助。

鲍勃

您可以使用<pre>标签,它显示在一个固定宽度字体的文本,并保留两个空格和换行

<td><pre>40 :Negative</pre></td>

默认样式可以但用CSS来覆盖。