如何對齊表格單元格中的文本？

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

如何解決這個問題？

來源

2009-11-07 Steven

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

來源

2009-11-07 08:49:05

很酷。您的幫助已解決問題。 – 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>

來源

2009-11-07 08:45:37 kolypto

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

什麼瀏覽器？我猜你正在使用IE6 :)該代碼是有效的，並且是在一條線上進行兩種不同對齊的最佳方式。它應該至少在「好」的瀏覽器中工作。 – kolypto 2009-11-07 09:27:37

加上一個用於解釋這個概念的例子，即：跨度和divs之間的差異，這對理解問題至關重要。 – Ideogram 2014-06-27 06:51:21

跨度不能改變頁面流，這樣你就不能使用跨度花車。

來源

2009-11-07 08:46:09 Roman

錯誤。浮動跨度使其成爲塊級元素。 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>

來源

2009-11-07 08:56:17 Aeolun

如何對齊表格單元格中的文本？

回答

相關問題