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

问题描述：

<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>

如何解决这个问题？

答

<!-- 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

很酷。您的帮助已解决问题。 – Steven 2009-11-07 08:59:47

如果它回答你的问题，你可以将它标记为答案。 – 2009-11-07 09:30:42

对我也很有用，谢谢 – akjain 2010-09-22 09:53:43

答

span标记不是一个块（css：display=block;），它是内联的。这意味着它不会占据整条线，并且它内部的文本没有对齐（视觉上）。

用div替换您的span，它会工作。

要对同一线路不同的路线，你需要一点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>

它不起作用。 – Steven 2009-11-07 08:53:56

什么浏览器？我猜你正在使用IE6 :)该代码是有效的，并且是在一条线上进行两种不同对齐的最佳方式。它应该至少在“好”的浏览器中工作。 – kolypto 2009-11-07 09:27:37

加上一个用于解释这个概念的例子，即：跨度和divs之间的差异，这对理解问题至关重要。 – Ideogram 2014-06-27 06:51:21

答

跨度不能改变页面流，这样你就不能使用跨度花车。

错误。浮动跨度使其成为块级元素。 http://www.w3.org/TR/CSS2/visuren.html#floats – Tyson 2009-11-07 09:06:26

答

只是不创建问题。假设你没有任何理由不使用简单的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>

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

相关推荐