无法在左侧的表格中对齐复选框

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

我尝试了很多东西，结果就是：

我申请了边框用于演示目的。

如果我添加float：left，我明白了：

我在另一个工作正常的网页中使用了相同的代码（表中只有2列）。

解决方案：

我已经在我的.css文件中使用过这个问题，尽管colspan =“3”仍然存在问题

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

我把它改成了

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

并为所有其他输入类型添加了一个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;
    }