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 を追加すると、次のようになります。

ここに画像の説明を入力

正常に機能していた別のWebページで同じコードを使用しました(テーブルには2列しかありませんでした)。

解決策:

colspan="3" にもかかわらず、奇妙に問題を引き起こした .css ファイルに既にこれがありました

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