테이블 셀에서 텍스트를 정렬하는 방법은 무엇입니까?

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으로 바꿔 넣으면 작동합니다. 당신이 스팬 수레를 사용할 수 있도록

이

<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

스팬, 페이지 흐름을 변경할 수 없습니다 :

같은 줄에 다른 정렬을 사용하려면, CSS 트릭의 비트가 필요합니다.

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