無法對齊表格中的複選框到左邊

Question

我在表格中有一個複選框，我無法將它們對齊到左側。

<tr> 
<td colspan="3" class="cb"> 
    <input type="checkbox" name="cb" value="checked" /> this is a checkbox 
</td> 
</tr> 


table.all td.cb{ 
color: #424242; 
border:1px solid black; 
margin:0 auto; 
text-align:left; 
} 

我已經嘗試了很多事情，但結果是這樣的：

我應用邊框用於演示目的。

如果我添加浮動：左，我得到這個：

我用同樣的代碼在另一個網頁它工作正常（有表只有2列）。

解決方案：

我已經有了這其中很奇怪，儘管合併單元格= 「3」

table.all td input{ 
width:90%; 
float:left; 
} 

我改成了

table.all td input.i{ 
width:90%; 
float:left; 
} 

的問題引起的我的.css文件

併爲所有其他輸入類型添加了class =「i」，現在它工作正常。

整個形式，如果必要的：

<div id="container_center"> 
      <form> 
       <table class="minden"> 
        <tr> 
         <td colspan="3"> 
          <p class="title">Create new account</p> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="3"> 
          <p class="title2">Enter account holder information</p> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="3"> 
          <div id="container_jobb_content_vonal"> </div> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <p>First name: *</p> 
         </td> 
         <td colspan="2"> 
          <p>Last name: *</p> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input type="text" name="firstname" size="45"> 
         </td> 
         <td colspan="2"> 
          <input type="text" name="lastname" size="45"> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <p>Email: *</p> 
         </td> 
         <td colspan="2"> 
          <p>Email again: *</p> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input type="text" name="email" size="45"> 
         </td> 

         <td colspan="2"> 
          <input type="text" name="email2" size="45"> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <p>Address 1: *</p> 
         </td> 
         <td colspan="2"> 
          <p>Address 2:</p> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input type="text" name="address1" size="45"> 
         </td> 

         <td colspan="2"> 
          <input type="text" name="address2" size="45"> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <p>Country: *</p> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <select name="country" class="sel_country"> 
           <option value="">[Please Select]</option> 
           <option value="United States">United States</option> 
           <option value="United Kingdom">United Kingdom</option> 
           <option value="Germany">Germany</option> 
          </select> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <p>City: *</p> 
         </td> 
         <td> 
          <p>State/Province: *</p> 
         </td> 
         <td> 
          <p>Zip code: *</p> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input type="text" name="city" size="45"> 
         </td> 
         <td> 
          <input type="text" name="state" size="30"> 
         </td> 
         <td> 
          <input type="text" name="zip" size="10" class="zip"> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <p>Phone number: *</p> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input type="text" name="phone" size="45"> 
         </td> 
        </tr> 


        <tr> 
         <td colspan="3"> 
          <p class="title3">Create your login</p> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="3"> 
          <div id="container_jobb_content_vonal"> </div> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <p>Username: *</p> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input type="text" name="username" size="45"> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <p>Password: *</p> 
         </td> 
         <td> 
          <p>Confirm password: *</p> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <input type="text" name="password" size="45"> 
         </td> 
         <td colspan="2"> 
          <input type="text" name="password2" size="45"> 
         </td> 
        </tr> 

        <tr> 
         <td colspan="3"> 
          <p class="title3">Accept terms</p> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="3"> 
          <div id="container_jobb_content_vonal"> </div> 
         </td> 
        </tr> 
        <tr> 
         <td colspan="3" class="cb"> 
          <input type="checkbox" name="cb" value="checked"/>this is a checkbox 
         </td> 
        </tr> 

        <tr> 
         <td> 
          <ul> 
           <li><a href="termsofservice.html">Terms of service</a></li> 
           <li><a href="privacypolicy.html">Privacy policy</a></li> 
          </ul> 
         </td> 
        </tr> 
        <tr> 
         <td class="submit" colspan="3"> 
          <input type="submit" name="purchase" value="Purchase" id="submitbutton"> 
         </td> 
        </tr> 
       </table> 


      </form> 
      </div> 

Answer 1

你也可以從你的輸入風格不包括複選框做到這一點。例如，我遇到了類似的問題，這個CSS：

 input { 
     width: 300; 
    } 

固定通過改變這樣的：

 input:not([type="checkbox"]) { 
     width: 300; 
    }