如何对齐表格单元格中的文本？答案

【问题标题】：How to align text in a table cell?如何对齐表格单元格中的文本？
【发布时间】：2010-12-14 03:04:17
【问题描述】：

<table>
   <tr>
      <td>
         <input type="checkbox" id="41" value="1">   
         Don't overwhelm yourself
         <span style="color:black;float:right">111111</span>
      </td>
   </tr>
</table>

111111 文本没有向右移动。

当我使用align:right时，它是一样的。

<table>
   <tr>
      <td>
         <input type="checkbox" id="41" value="1">   
         Don't overwhelm yourself
         <span style="color:black;align:right">111111</span>
      </td>
   </tr>
</table>

如何解决这个问题？

【问题讨论】：

标签： css html-table alignment

【解决方案1】：

<!-- width 100%, so we can see the floating -->
<table style="width:100%">
  <tr>
    <!-- width 100%, so we can see the floating -->
    <td style="width:100%" >

      <!-- float to left -->
      <input style="float:left" type="checkbox" id="41" value="1">    
      <span style="float:left"> Don't overwhelm yourself </span> 

      <!-- float to right -->
      <span style="color:black;float:right">111111</span> 

      <!-- clear floating -->
      <br style="clear:both" /> 
    </td>
  </tr>
</table>

检查样本here

【讨论】：

【解决方案2】：

span 标签不是块一（css：display=block;），它是内联的。这意味着它没有占据整行，并且其中的文本没有对齐（视觉上）。

将您的span 替换为div，它会起作用。

要在同一行有不同的对齐方式，您需要一些 CSS 技巧：

<div style="float: left;">
    <label><input type="checkbox" id="41" value="1"> Don't overwhelm yourself</label>
    </div>
<div style="float: right;">
    111111
    </div>

【讨论】：

什么浏览器？我猜您使用的是 IE6 :) 该代码是有效的，并且是在一行中有两种不同对齐方式的最佳方式。它至少应该在“好的”浏览器中工作。
加一个用于解释概念，即：span和div的区别，这对于理解问题至关重要。

【解决方案3】：

Span 不能改变页面流，所以你不能在 span 中使用浮动。

【讨论】：

错了。浮动跨度使其成为块级元素。 w3.org/TR/CSS2/visuren.html#floats

【解决方案4】：

只是不要制造问题。假设您没有任何理由不使用简单的 2 个表格单元格。

此外，对齐永远不会起作用。你应该使用文本对齐。

<table>
  <tr>
    <td>
      <input type="checkbox" id="41" value="1">Don't overwhelm yourself
    </td>
    <td style="color:black;text-align:right">
      111111
    </td>
  </tr>
</table>

【讨论】：