1

私はサイトに次のページを持っています：

スクリーンショット

定義された幅でそれらの周りに2つの列を追加することにより、これらの2つの列を中央に配置しました。

    <table class="form">
    <tbody>
    <tr>
    <td style="width:20%;"></td>
    <th>User ID</th>
    <td><input type="text" name="userid" id="userid" class="medium" value="" /></td>
    <td style="width:20%;"></td>
    </tr>
    <tr>
    <td></td>
    <th>Password</th>
    <td><input type="password" name="password" id="password" class="medium" /></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <th><label for="remember">Remember my user ID</label></th>
    <td><input type="checkbox" name="remember" id="remember" value="true" /></td>
    <td></td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
    <td colspan="3"><a href="forgot/">Forgot your user ID or password?</a></td>
    <td><input type="submit" name="submit" id="submit" value="Login" /></td>
    </tr>
    </tfoot>
    </table>

幅20％のサイズの側面にある2つの空の列なしでこれを達成する方法はありますか？

4

3 に答える 3

5 
<style>
table.form {
    width: 400px; /* or however wide you want it */
    margin: 0 auto;
}
</style>

次に、必要に応じて送信ボタンを独自の要素に配置することで、送信ボタンを幅全体に広げることができます。または、一貫した幅のためにテーブルに保持することもできます。

于 2013-02-20T20:58:42.087 に答える
5

誰かがすでに解決しているように、テーブルをうまく処理するための解決策を見つけることができますが、これにはテーブルを使用しないことをお勧めします。テーブルは常にスタイルに問題があります。div などの別の html 要素を使用してこれを行うこともできます。次回はそれを検討してください:)

于 2013-02-20T21:00:41.613 に答える
0

中央に配置する要素の幅（ピクセル、em-s、パーセンテージ..）を定義し、設定margin-left: auto margin-right: autoすると役立ちます

于 2013-02-20T21:48:11.153 に答える