1

HTML を使用してフィールドをフォーマットしようとしています。私は次のものを持っています：

<table style="width: 100%;" cellpadding="0px" cellspacing="0px">
    <tr>
        <td style="width: 65px;">
            <asp:Label ID="lblKeywords" runat="server" Text="Keywords"
                 AssociatedControlID="txtKeywords" Font-Bold="true"></asp:Label>
        </td>
        <td>
            <asp:TextBox ID="txtKeywords" Width="100%" runat="server"
                 MaxLength="256" placeholder="Use comma to seperate keywords." />
        </td>
    </tr>
</table>

結果を確認すると、テキスト ボックスtxtKeywordsはそのセルよりも 4 ピクセル長くなります。

これらは境界線の 4 ピクセルであると想定しています。これに対処する最善の方法は何ですか？

4

2 に答える 2

1

https://developer.mozilla.org/en-US/docs/CSS/box-sizing

最も簡単な方法は、入力を使用するように設定することですbox-sizing: border-box;

input.myClass {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

これはほとんどのブラウザーで機能します。

于 2012-11-12T08:23:26.040 に答える
1

次の CSS ルールを使用して、box-sizing を「border-box」に変更できます。

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

IMHOこれにより、理解がはるかに簡単な動作になります。たとえば、「100%」の幅は、ボーダー、マージン、パディングを含めて 100% を意味します。詳細については、こちらをご覧ください: http://paulirish.com/2012/box-sizing-border-box-ftw/

また、補足として、テーブルを使用してフォーム フィールドを整列させないことを検討してください。それについての私のブログ記事を見てください: http://davidtanzer.net/css_vertical_align

于 2012-11-12T08:24:29.890 に答える