Question

我有以下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来实现这一目标？或任何其他方式？

Answer 1

好吧，如果你不反对使用表格（看起来你不是:)，那么就把它放在桌子上了：

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

Answer 2

您可以使用<pre>

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

Answer 3

您可以使用不间断空格字符替换空格

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

Answer 4

您正在使用换行符（<br>）而不是新的<td>行。在不查看布局的其余部分的情况下，如果不使用空格（ ）只使用一行，或者不进一步将数据拆分为2列，则无法对齐这些。

Answer 5

将您的数字换成跨度并给它一些宽度。

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

Answer 6

这是一个可能的解决方案（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作为表格中的布局。您需要将元素包装在几个跨度中。

希望这有帮助。

鲍勃

Answer 7

您可以使用<pre>标记以固定宽度字体显示文本并保留空格和换行符

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

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

td内容的对齐问题

7 个答案: