Question

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

如何解决这个问题？

Answer 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

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

Answer 3

Span无法更改页面流，因此您无法使用带有span的浮点数。

Answer 4

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

此外，对齐永远不会有效。你应该使用text-align。

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

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

4 个答案: