0

<table>標準の HTML 連絡先フォームをレイアウトするためにを使用しています。HTML はプレゼンテーションではなく構造であるべきであることを考えると、表を使用するメリットについては議論しないでください (これが、表を使用することが正当化されると私が信じている理由です)。

それにもかかわらず、ここに私が使用しているマークアップと CSS があります (ASP.NET MVC によって生成されたもの):

            <table class="fieldTable">
                <tbody>
                    <tr>
                        <th><label for="Name">Your name</label></th>
                        <td><input id="Name" name="Name" type="text" value="" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>

                    <tr>
                        <th><label for="EmailAddress">Your e-mail address</label></th>
                        <td><input id="EmailAddress" name="EmailAddress" type="text" value="" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>

                    <tr>
                        <th><label for="MessageBody">Message</label></th>
                        <td><textarea cols="30" id="MessageBody" name="MessageBody" rows="6"></textarea></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>

                    <tr>
                        <td></td>
                        <td><button type="submit"><span>Send Message</span></button></td>
                    </tr>
                </tbody>
            </table>

そして私のCSS：

.fieldTable th {
    text-align: right;
    font-weight: normal;
    vertical-align: top;
    padding: 0.25em;
    padding-right: 0.5em; }

.fieldTable input,
.fieldTable textarea,
.fieldTable button {
    width: 100%; }

input, textarea, button {
    border: 1px solid #999;
    padding: 0.5em;

    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 7px 3px #c4c4c4;
    box-shadow: 0px 0px 7px 3px #c4c4c4; }

button        { background: #DDD; position: relative; }
button:hover  { background: #FFF; }
button:active span { position: relative; top: 2px; left: 2px; }

tr { outline: 1px solid blue; }
td { outline: 1px solid red; }

ただし、次のようにレンダリングされるようです。

通常のレンダリング tr/td アウトラインを使用したレンダリング

<button>要素がセルを水平に埋めないのはなぜですか?

4

2 に答える 2

2

ボックスサイズをお探しの方もいらっしゃると思いますが、幅/高さを計算するときにマージン/パディングを追加するか除外するかを決定します。

ボックスサイズ：border-box;

それはあなたがパーセンテージの幅/高さを設定することを可能にするはずです、そしてそれはこぼれることなく満たされます。

編集：デフォルトでボタンがオンになっています（要素を調べると、ブラウザがすでに要素を追加していることがわかります）。テキストエリアと入力フィールドに追加して、ボタンと一致させることができます。

スクリーンショットを見ると。入力フィールドはTDの外に出ており、実際に動作しているのはボタンだけのようです。

于 2012-08-08T01:26:08.080 に答える
1

David 私はあなたの html を見て、それに基づいてjsFiddleを作成しました。次に、探しているbox-sizing プロパティを使用するように css を変更しました。DOM 上の他のオブジェクトに適用されますが、テキストエリアだけを独自のクラスに抽出したい場合があります。

于 2012-08-08T01:33:17.300 に答える