4

我在表格中有一个复选框,我无法将它们对齐到左侧。

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

1 回答 1

7

您也可以通过从输入样式中排除复选框来完成此操作。例如,我在使用这个 CSS 时遇到了类似的问题:

        input {
        width: 300;
    }

并通过更改为:

        input:not([type="checkbox"]) {
        width: 300;
    }
于 2013-05-13T15:27:31.660 回答