对齐问题
问题描述:
我有以下的HTML对齐问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
.................
....
.......
<td colspan="4" ><br><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>
<40 : Negative
40-80 : positieve
</pre>
</td>
答
你可以用不间断空格字符替换你的空间,
<td colspan="4" ><br><40 nbsp;nbsp;nbsp;nbsp;nbsp;: Negative<br>40-80nbsp;nbsp;nbsp;nbsp;: positieve <br></td>
答
好吧,如果你不反对使用表(它看起来像你不是:)),那么只要坚持在一个表太:
<td>
<table>
<tbody>
<tr><td><40</td> <td>:Negative</td></tr>
<tr><td>40-80</td> <td>:Positive</td></tr>
</tbody>
</table>
</td>
答
您正在使用换行符(<br>
),而不是一个新的<td>
行。如果不查看布局的其余部分,则无法使用空格(
)仅使用一行来排列这些空间,也无需将这些数据进一步拆分为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来覆盖。
谢谢,但这个内容来自动态来源。所以无法预测  ; :( – balalakshmi 2011-03-30 13:38:27